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

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>
}

There are quite lot checkboxes in the form, currently, what I am doing is to define one method for each checkbox. How can I define one method which can be used by all the checkboxes.

Many thanks in advance

Answer 1

You can use an id on your checkboxes and retrieve it from event.target.id that is passed to onChange handler as below:

_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

You could use the LinkedStateMixin .

Your checkboxes would look something like this:

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

This will automatically keep the values of the checkboxes a , b and c up to date with the state variables.

Answer 3

I did it this way:

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

Note the "defaultChecked" and that I'm not using the preventDefault() statement.