javascript 从 React 中检查的输入中获取值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34315362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value from checked input in React
提问by Lucky
I have complex object in React and can 't understand how to get value from checked input. There is piece of code with input. I need to add input checked value instead of words "Input value".
我在 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>
})
采纳答案by msmfsd
You could just bind the value and the update method to the state of your component and set the actions directly on the initial input markup with the onChange handler.
您可以将值和更新方法绑定到组件的状态，并使用 onChange 处理程序直接在初始输入标记上设置操作。
Note that React is unidirectional, not bidirectional, so it can good to try to control everything fromReact toyour rendered html and not the other way or back and forth.
请注意，React 是单向的，而不是双向的，因此最好尝试控制从React到渲染的 html 的所有内容，而不是相反或来回控制。
Following code is from: https://facebook.github.io/react/docs/forms.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}
/>
);
}
回答by Himanshu Teotia
I haven't used so much react so far but I think you can get the value of checkbox using :
到目前为止，我还没有使用过太多 react，但我认为您可以使用以下方法获取复选框的值：
event.target.checked
回答by Roman
You can use to catch the event
您可以使用来捕捉事件
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}
/>);
}
};
回答by Phillip
If you're using React refsto retrieve your input values:
如果您使用 Reactrefs来检索您的输入值：
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>
)
}
}
