1
votes

Comment cocher / décocher une case avec l'événement onClick sur un bouton dans React.js?

<Button onClick={document.getElementById("checkboxForHamburger").checked = false}> UNCHECK </Button>

javascript reactjs jquery

2 commentaires

Contrôlez votre case à cocher - reactjs.org/docs/forms.html#controlled-components. Accéder directement au dom est une mauvaise pratique pour réagir.

use state, n'allez pas par là - ça ne réagit

4 Réponses :

5
votes

Premièrement, votre case à cocher n'est pas contrôlée par une valeur d'état:

Commençons par ajouter un état:

<button onClick={() => {setChecked(old => !old)}}> {checked ? 'uncheck' : 'check'} </button>

Ensuite, nous donnons la valeur à la case à cocher:

<input type="checkbox" checked={checked} />

Alors disons au bouton de basculer l'état coché

const [checked, setChecked] = React.useState(true);

Exemple de travail sur this codesandbox

0 commentaires

0
votes

Vous pouvez faire quelque chose comme ceci -

<button type="button" onClick={this.handleCheckbox}>{this.state.checked ? 'Uncheck': 'Check'}</button>

Mettre à jour

Si vous voulez faire basculer la case à cocher en cliquant sur le bouton, vous peut le faire en modifiant la fonction handleCheckbox et le texte du bouton.

  handleCheckbox = (e) => {
    e.preventDefault();
    this.setState({checked: !this.state.checked});
  }

Et le bouton serait

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        checked: true
    }
  }

  handleCheckbox = (e) => {
    e.preventDefault();
    this.setState({checked: false});
  } 

  render() {
    return (
      <div>
        <input type="checkbox" checked={this.state.checked} />
        <button type="button" onClick={this.handleCheckbox}>Uncheck</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

1 commentaires

Je préfère utiliser des composants fonctionnels plutôt que des composants de classe

-1
votes

Je viens de lancer cette erreur.

Voulez-vous l'exécuter comme le code ci-dessous?

import React, { useState }  from 'react';
import './App.css';
import { Button } from 'react-bootstrap';

function App() {
const [value, setValue] = useState(false);
  return (
    <div>
      <input type="checkbox" value={value} id="checkboxForHamburger" />

      <Button onClick={() => setValue(!value)}> UNCHECK </Button>
    </div>
  );
}

export default App;

Si la valeur est booléenne, nous pouvons dire si elle est coché ou non.

2 commentaires

n'utilisez pas directement la valeur de l'état.

De plus, si vous souhaitez faire la distinction entre UNCHECK et CHECK, utilisez l'opérateur tricuspide pour écrire ensemble ce qui suit. {évaluer ? VÉRIFIER: UNCHECK}

0
votes

Cela fonctionnera:

import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component {
 constructor(){
  this.state={check:false};

   this.Toggle_checkbox=this.Toggle_checkbox.bind(this);
 }
  Toggle_checkbox=()=>{
this.setState({check:!this.state.check});
  }
 render(){
   return (
    <div>
      <input type="checkbox" checked={this.state.check} />

      <button onClick={this.Toggle_checkbox}> toggle </button>
    </div>
  );
}

 } 
ReactDOM.render(<App/>,document.getElementById('root'));

vérifier: https: // stackblitz.com/edit/react-xrt6wa

0 commentaires