在reactjs中以编程方式取消选中复选框 [英] uncheck checkbox programmatically in reactjs

问题描述

我搞砸了复选框，我想知道有一种方法可以通过调用函数来取消单击按钮时的复选框吗？如果是这样的话？我该怎么做？

I am messing with checkboxes and I want to know that is there a way in which I can uncheck a checkbox on click of a button by calling a function?? If so? How can I do that?

<input type="checkbox" className="checkbox"/>
<button onClick={()=>this.unCheck()}

如何以编程方式取消选中该复选框，以及如果我有多个使用地图功能动态生成的复选框，该怎么办？
如果需要，如何取消选中它们？

How can I uncheck the checkbox programmatically and what if I have multiple checkboxes generated dynamically using map function. How can I uncheck them If I want to?

推荐答案

有复选框的属性选中，您可以使用它来切换复选框的状态。

There is property of checkbox checked you can use that to toggle the status of check box.

可能的方式：

1-您可以将 ref 与复选框一起使用，并使用 onClick 按钮，使用 ref 可以取消选中该框。

1- You can use ref with check boxes, and onClick of button, by using ref you can unCheck the box.

2-受控元素，意味着将复选框的状态存储在 state 变量内，并在单击按钮时对其进行更新。

2- You can use controlled element, means store the status of check box inside a state variable and update that when button clicked.

检查此示例通过使用ref ，为每个复选框分配唯一的 ref ，然后在onClick函数中传递该项目的索引，使用该索引进行切换特定的 checkBox ：

Check this example by using ref, assign a unique ref to each check box then pass the index of that item inside onClick function, use that index to toggle specific 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 变量中，然后单击按钮更改该值：

Check this example of controlled element, means storing the state of checkbox inside state variable, and on click of button change the value of that:

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

这篇关于在reactjs中以编程方式取消选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！