web-dev-qa-db-fra.com

décochez la case par programme dans les réactions

Je déconne avec les cases à cocher et je veux savoir qu’il ya un moyen de décocher une case en cliquant sur un bouton en appelant une fonction ?? Si c'est le cas? Comment puis je faire ça?

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

Comment désélectionner la case à cocher par programme et que se passe-t-il si plusieurs cases à cocher sont générées de manière dynamique à l'aide de la fonction de carte ..__ Comment les désélectionner si je le souhaite

javascriptreactjscheckbox
6
Saif Ali Khan

Il existe une propriété de la case à cocher checked que vous pouvez utiliser pour activer/désactiver le statut de la case à cocher.

Moyens possibles:

1- / Vous pouvez utiliser ref avec les cases à cocher et onClick du bouton, en utilisant ref, vous pouvez décocher la case.

2- Vous pouvez utiliser un élément contrôlé, cela signifie stocker le statut de la case à cocher à l'intérieur d'une variable state et la mettre à jour lorsque le bouton est cliqué.

Vérifiez cet exemple avec en utilisant ref , attribuez une ref unique à chaque case à cocher, puis passez l’index de cet élément à l’intérieur de la fonction onClick, utilisez cet index pour basculer la checkBox spécifique:

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

Cochez cet exemple de élément contrôlé , signifie stocker la state de la case à cocher dans la variable state, et en cliquant sur le bouton, changez la valeur de cette:

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

7
Mayank Shukla

Les cases à cocher ont une propriété cochée, vous pouvez l'associer à l'état et le changer dynamiquement. Vérifiez ces liens: 

https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

http://react.tips/checkboxes-in-react/

1
kogmo

Vous pouvez utiliser javascript comme ci-dessous.

 function unCheck() {
   var x = document.getElementsByClassName("checkbox");
   for(i=0; i<=x.length; i++) {
      x[i].checked = false;
    }   
 }

Petite DEMO

1
Suresh Ponnukalai

Je pensais à quelque chose comme ça:

<input onChange={(input) => this.onFilterChange(input)} className="form-check-input" type="checkbox" />

onFilterChange = (input) => { let { value, checked } = input.target;}

unCkeckAll = () => {
    [...document.querySelectorAll('.form-check-input')].map((input) => {
        if (input.checked) {
            let fakeInput = {
                target: {
                    value: input.value,
                    checked: false
                }
            }
            input.checked = !input.checked;
            this.onFilterChange(fakeInput);
        }
        return null;
    })
}
0
Gary Felicite-Prudent