Question

我写了他的反应成分

  class RegistrationSpecialNeeds extends React.Component {
     constructor(props) {
        super(props);
        this.state = {"specialneeds": []}
        this.isChecked.bind(this)
     }
     handleChange(event, key) {
        console.log('came inside handle checkbox event')
        console.log('what is event ' + event.target.checked)
        console.log('what is key' + key)
     }
     isChecked(key) {
        if (this.state.specialneeds.indexOf(key) > -1) {true} else {false}
     }
     render() {
        return (
           <div>
           <label> check all that apply
              {
                 this.props.restrictions.map((restriction, index) => 
                    <div>
                    <label>
                       <input type='checkbox' name='restriction' checked={this.isChecked(restriction.key)} onChange={(e) => this.handleChange(e, restriction.key)}/>{restriction.key}) {restriction.name}
                    </label>
                    </div>
                 )
              }
           </label>
           </div>
        )
     }
  }

<RegistrationSpecialNeeds restrictions={[{key: "a", name: "Dietary Restrictions"}, {key: 'b', name: 'Physical Disabilities'}, {key: 'c', name: 'Medical Needs'}]} />

当我在复选框中选择某些内容时，我会得到输出

[Log]进入句柄复选框事件（Registration.html，第29行） [日志]什么是事件未定义（Registration.html，第30行） [日志]什么是keya（Registration.html，第31行）

如何获取事件对象？

Answer 1

this.props.restrictions.map((restriction, index) => 
                  <div>
                  <label>
                     <input type='checkbox' name='restriction' onChange={handleChange.bind(this, restriction.key)}/>{restriction.key}) {restriction.name}
                  </label>
                  </div>
               )

尝试从输入字段传递值并检查handleChange方法中的值。使用onChange属性

Answer 2

以下是传递适合我的额外参数的正确方法

onChange={(e) => this.handleChange(e, restriction.key)}

并且事件处理程序看起来像

 handleChange(event, key) {
   console.log('came inside handle checkbox event')
   console.log('what is event ' + event.target.checked)
   console.log('what is key' + key)
}

使用多个复选框

2 个答案: