Question

我想知道是否可以访问ReactJs中的next或prev元素吗？我有两个inputs，分别带有标签a和b。在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
}

ReactJs中复选框的onChange函数

1 个答案: