Question

我在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>

                    })

Answer 1

到目前为止，我还没有使用过这么多的反应，但我认为你可以使用这个获得复选框的价值：

event.target.checked

Answer 2

您可以将值和update方法绑定到组件的状态，并使用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}
      />
    );
  }

Answer 3

您可以用来捕捉事件

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

Answer 4

如果您使用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中检查输入中获取值

4 个答案: