У меня есть сложный объект в React и я не могу понять, как получить значение из проверенного ввода. Есть кусок кода с вводом. Мне нужно добавить проверенное значение ввода вместо слов «Входное значение».
const ClientForm = React.createClass({
.....
render: function() {
......
return(
< AgForm.Input >
< label className = 'myLabel' >
< input className = "valueBroker"
disabled = {
readOnly
}
type = 'checkbox'
name = 'is_broker'
onChange = {
this.form().checkbox('is_broker', true)
}
checked = {
_isTrue(this.form().value('is_broker'))
}
/>
Agent < /label> < /AgForm.InputLine> < AgForm.InputLine error = {
errors.system
}
/> < /div>
module.exports = AddClientForm;
const ClientListItem = React.createClass({
render() {
return
<div >
Input value {
(client.kind_name || '').split(',').map((type) => {
return <div > {
type
} < /div>
})
}
< /div>
})
4 ответа
Вы можете просто привязать значение и метод обновления к состоянию вашего компонента и установить действия непосредственно в исходной разметке ввода с помощью обработчика onChange.
Обратите внимание, что React является однонаправленным, а не двунаправленным, поэтому может быть полезно попытаться контролировать все от React до вашего рендеринга html, а не наоборот или туда-сюда.
Следующий код взят из: https://facebook.github.io/react/docs/forms. HTML
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
Если вы используете React refs
для получения ваших входных значений:
class Form extends React.Component {
constructor(props) {
//... state
this.checkBoxRef = React.createRef()
}
handleFormSubmit = (e) => {
e.preventDefault()
let isChecked = this.checkBoxRef.current.checked
console.log(isChecked) // true | false
}
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<input type="checkbox" ref={this.checkBoxRef}/>
<button type="submit" />
</Form>
)
}
}
Вы можете использовать, чтобы поймать событие
class MyForm extends React.Component {
handleChange(event){
console.info(event.target.checked,
event.target.value,
event.target.dataset.attr);
};
render(){
return (
<input
type="text"
value={'myValue'}
data-attr={'attrValue'}
onChange={this.handleChange}
/>);
}
};
До сих пор я не использовал так много реакции, но я думаю, что вы можете получить значение флажка, используя это:
event.target.checked
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.