Question

 _toggleValue: function(state) {
    //?? how to do it 
    //this.setState(???);
  },

render() {
  <div>
    <form>
      <input type="checkbox" onChange={this._toggleValue.bind(null, this.state.a)} />
      <input type="checkbox" onChange={this._toggleValue.bind(null, this.state.b)} />
      <input type="checkbox" onChange={this._toggleValue.bind(null, this.state.c)} />
    </form>
  </div>
}

表单中有很多复选框，目前我正在做的是为每个复选框定义一个方法。如何定义一个可供所有复选框使用的方法。

非常感谢提前

Answer 1

您可以在复选框上使用id，然后从传递给event.target.id处理程序的onChange中检索它，如下所示：

_toggleValue: function(event) {
    var state = this.state[event.target.id];
},
render: function() {
    return (
        <div>
            <form>
                <input type="checkbox" id={1} onChange={this._toggleValue}/>
                <input type="checkbox" id={2} onChange={this._toggleValue}/>
                <input type="checkbox" id={3} onChange={this._toggleValue}/>
            </form>
        </div>
    )
}

Answer 2

您可以使用LinkedStateMixin。

您的复选框看起来像这样：

<input type='checkbox' checkedLink={this.linkState('a')}/>
<input type='checkbox' checkedLink={this.linkState('b')}/>
<input type='checkbox' checkedLink={this.linkState('c')}/>

这会自动将复选框a，b和c的值与状态变量保持同步。

Answer 3

我是这样做的：

toggleCheckbox(name, event) {
  let change = !this.state[name];
  this.setState({name: change});
}

<input type="checkbox" name="active" defaultChecked={this.state.active} onChange={this.toggleCheckbox.bind(this, 'active')} />       
<input type="checkbox" name="shared" defaultChecked={this.state.shared} onChange={this.toggleCheckbox.bind(this, 'shared')} />

注意＆＃34; defaultChecked＆＃34;并且我没有使用preventDefault（）语句。

在React中，如何使用一种方法切换多个复选框值的状态

3 个答案: