我正在弄乱复选框，我想知道有没有一种方法可以通过调用函数来取消选中单击按钮时的复选框？如果是这样？我怎样才能做到这一点？
<input type="checkbox" className="checkbox"/>
<button onClick={()=>this.unCheck()}
如何以编程方式取消选中该复选框，以及如果我使用地图函数动态生成多个复选框怎么办？
如果我愿意，如何取消选中它们？
有复选框的属性checked您可以使用它来切换复选框的状态。
可能的方式：
1-您可以使用ref带有复选框，以及onClick按钮，通过使用ref您可以取消选中该框。
2-您可以使用受控元素，意味着将复选框的状态存储在state变量并在单击按钮时更新该变量。
通过检查这个例子使用参考，分配一个唯一的ref到每个复选框，然后在 onClick 函数中传递该项目的索引，使用该索引来切换特定的checkBox:
class App extends React.Component{
constructor(){
super();
this.state = {value: ''}
}
unCheck(i){
let ref = 'ref_' + i;
this.refs[ref].checked = !this.refs[ref].checked;
}
render(){
return (
<div>
{[1,2,3,4,5].map((item,i) => {
return (
<div>
<input type="checkbox" checked={true} ref={'ref_' + i}/>
<button onClick={()=>this.unCheck(i)}>Toggle</button>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
检查这个例子受控元件，表示存储state里面的复选框state变量，然后单击按钮更改其值：
class App extends React.Component{
constructor(){
super();
this.state = {value: []}
}
onChange(e, i){
let value = this.state.value.slice();
value[i] = e.target.checked;
this.setState({value})
}
unCheck(i){
let value = this.state.value.slice();
value[i] = !value[i];
this.setState({value})
}
render(){
return (
<div>
{[1,2,3,4,5].map((item,i) => {
return (
<div>
<input checked={this.state.value[i]} type="checkbox" onChange={(e) => this.onChange(e, i)}/>
<button onClick={()=>this.unCheck(i)}>Toggle</button>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
