在React中，如何使用一種方法切換多個複選框的值

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

表單中有相當多的複選框，目前我所做的是爲每個複選框定義一個方法。我如何定義一個可供所有複選框使用的方法。在React中，如何使用一種方法切換多個複選框的值

提前

來源

2015-09-03 Cloud tech

你可以使用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瞭解最新的狀態變量的值。

來源

2015-09-03 06:58:14 Clarkie

感謝您的回答。它正在工作 –

LinkedStateMixin已過時，您應該使用checked，defaultChecked和onChange來實現相同的目標。發送參數是以@aarkeio的下一個答案的方式。 – Baris

非常感謝您可以使用您的複選框，並id從傳遞到下面onChange處理器event.target.id檢索：

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

來源

2015-09-03 01:32:35 romseguy

我喜歡它使用event.target獲取元素的參考。但是，由於對象字段是動態值，因此如何在此處使用方法「setState」更改狀態。 –

你可以這樣做：'var newState = Object.assign（{}，this.state）; newState [event.target.id] = checkboxState; this.setState（newState）;' – romseguy

我就是這麼做的：

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

注意「defaultChecked」那我不使用的preventDefault（）語句。

來源

2016-09-02 19:41:49 aarkerio

在React中，如何使用一種方法切換多個複選框的值

回答

相關問題