函数onChange为ReactJs中的Checkbox

Question

我想知道是否有可能访问ReactJs中的next或prev元素？我有两个inputs标签a和b.In handlerChecked函数我想检查两个输入的属性checked。例如我检查a我想要检查b是否被检查。我该怎么做？

class App extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        data: [],
        .
        .
        .
    }
}
       .
       .
       .

handlerChecked = (e, elem) => {
    let isChecked = e.target.checked
    let value = e.target.value
    let checknext = e.target.next('input').checked //In this part I want to check the attribute checked of other Input//// 
}

.
.
.
render() {
    return (
        <div>
            <input type="checkbox" className="" value="0" onChange={this.handlerChecked} /> <label><span>a</span></label>
            <input type="checkbox" className="" value="1" onChange={this.handlerChecked} /> <label><span>b</span></label>

        </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

Answer 1

简短的回答是不，React不会这样工作，你不能在元素的祖先树上上下找到兄弟元素。

实现此功能的常用方法是为每个复选框提供name属性。

例如：

  <div>
    <input name="check1" type="checkbox"  onChange={this.handlerChecked} checked={this.state.check1} /> <label><span>a</span></label>
    <input name="check2" type="checkbox" onChange={this.handlerChecked} checked={this.state.check2} /> <label><span>b</span></label>
</div>

使用一个处理程序处理这两个复选框

const handlerChecked = (e) => {
  const {name, checked} = e.target
  this.setState({
    [name]: checked
  })
}

然后在你的州跟踪这两个名字，如下所示：

this.state = {
 check1: false,
 check2: false
}