Fatal编程技术网
  • javascript/
  • Javascript 从React中的选中输入获取值

Javascript 从React中的选中输入获取值

javascript reactjs

Javascript 从React中的选中输入获取值,javascript,reactjs,Javascript,Reactjs,我在React中有一个复杂的对象，无法理解如何从选中的输入中获取值。有一段带有输入的代码。我需要添加输入检查值，而不是“输入值” const ClientForm=React.createClass({ ..... render:function（）{ ...... 返回( 代理 module.exports=AddClientForm； const ClientListItem=React.createClass({ render（）{ 返回 输入值{ （client.kind_name

我在React中有一个复杂的对象，无法理解如何从选中的输入中获取值。有一段带有输入的代码。我需要添加输入检查值，而不是“输入值”

const ClientForm=React.createClass({
.....
render:function（）{
......
返回(
module.exports=AddClientForm； const ClientListItem=React.createClass({ render（）{ 返回 输入值{ （client.kind_name | |'）.split（'，）.map（（type）=>{ 返回{ 类型 }
}) }
})
您可以将值和更新方法绑定到组件的状态，并使用onChange处理程序直接在初始输入标记上设置操作

请注意，React是单向的，而不是双向的，因此最好尝试控制从React到呈现的html的所有内容，而不是相反或来回

以下代码来自：

getInitialState:function（）{
返回{value:'Hello！'}；
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
返回(
);
}
到目前为止，我还没有使用过这么多react，但我认为您可以使用以下方法获得复选框的值：

event.target.checked
您可以使用来捕捉事件

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}
          />);
   }
};

类MyForm扩展了React.Component{
手变（活动）{
控制台信息（event.target.checked，
event.target.value，
event.target.dataset.attr）；
};
render（）{
返回(
);
}
};
如果您使用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>
         )
    }
}

类表单扩展了React.Component{
建造师（道具）{
//…州
this.checkBoxRef=React.createRef（）
}
handleFormSubmit=（e）=>{
e、 预防默认值（）
让isChecked=this.checkBoxRef.current.checked
console.log（isChecked）//true | false
}
render（）{
返回(
)
}
}
类型“EventTarget”上不存在属性“checked”。@HarshaVardhini我认为您需要将“this”绑定到输入…
onChange={this.handleChange.bind（this）}
问题是关于复选框的。您的答案很好，但与问题没有直接关系。Himanshu的下一个答案是正确的
event.target.checked
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}
          />);
   }
};

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>
         )
    }
}