web-dev-qa-db-fra.com

Comment obtenir les valeurs/propriétés d'une case à cocher react-bootstrap?

J'essaie d'utiliser la case à cocher react-bootstrap ( https://react-bootstrap.github.io/components.html#forms-controls ) et j'ai besoin de déclencher un événement lorsqu'il change d'état. Il serait également intéressant de pouvoir vérifier/vérifier par programme et/ou si cela est vérifié. Malheureusement, lorsque le code est transpilé et rendu, il encapsule l'entrée dans un div. 

Comment puis-je trouver cela dans le dom et le manipuler?

Mon code ressemble à ceci: 

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap';

const EditItem = (props) => {

  return (
    <div>
      <Checkbox style={{ marginLeft: '15px' }} >{props.itemLable}</Checkbox>
    </div>
  );
};

export default EditItem;

Et le navigateur rend ceci:

...
<div class="checkbox" style="margin-left: 15px;">
  <label>
    <input type="checkbox">
  </label>
</div>
...

Je vois l’application inputRef dans la documentation, mais je n’arrive pas à trouver d’exemple ni à le faire fonctionner moi-même. 

javascriptreactjscheckboxreduxreact-bootstrap
5
John Meyer

Il y a deux manières: la manière de réagir et la manière de ne pas réagir.

La méthode React consiste à définir l'état du composant enfant en lui transmettant des accessoires et à réagir aux modifications de son état en attachant des gestionnaires d'événements. Dans le cas de Checkbox, cela signifie que vous définissez les accessoires checked et onChange.

Remarquez dans l'exemple ci-dessous comment le composant parent (App) garde trace de l'état de la case à cocher et peut le définir avec this.setState et l'interroger avec this.state.checkboxChecked.

const { Checkbox, Button } = ReactBootstrap;

class App extends React.Component {
  constructor() {
    super();
    this.state = { checkboxChecked: false };
    this.handleChange = this.handleChange.bind(this);
    this.handleIsItChecked = this.handleIsItChecked.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  }
  
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.checkboxChecked}
          onChange={this.handleChange} />
        <Button type="button" onClick={this.handleToggle}>Toggle</Button>
        <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button>
      </div>
    );
  }
  
  handleChange(evt) {
    this.setState({ checkboxChecked: evt.target.checked });
  }
  
  handleIsItChecked() {
    console.log(this.state.checkboxChecked ? 'Yes' : 'No');
  }
  
  handleToggle() {
    this.setState({ checkboxChecked: !this.state.checkboxChecked });
  }
}

ReactDOM.render(<App/>, document.querySelector('div'));
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script>
<div></div>

La méthode la moins réactive consiste à obtenir une référence à l'élément DOM rendu et à accéder directement à sa propriété checked. Je ne le recommande pas, car cela pollue nécessairement votre joli code React fonctionnel avec du code icky impératif. Néanmoins, avec React-Bootstrap, vous pouvez le faire en définissant la propriété inputRef, comme dans l'exemple ci-dessous:

const { Checkbox, Button } = ReactBootstrap;

class App extends React.Component {
  constructor() {
    super();
    this.handleIsItChecked = this.handleIsItChecked.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  }
  
  render() {
    return (
      <div>
        <Checkbox
          onChange={this.handleChange}
          inputRef={ref => this.myCheckbox = ref} />
        <Button type="button" onClick={this.handleToggle}>Toggle</Button>
        <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button>
      </div>
    );
  }
  
  handleIsItChecked() {
    console.log(this.myCheckbox.checked ? 'Yes' : 'No');
  }
  
  handleToggle() {
    this.myCheckbox.checked = !this.myCheckbox.checked;
  }
}

ReactDOM.render(<App/>, document.querySelector('div'));
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script>
<div></div>

18
Jordan Running

Avez-vous essayé de définir une propriété onChange dans votre case à cocher?

handleChange(event) {
    this.setState(*set checkbox state here*);
}

<Checkbox onChange={this.handleChange}></Checkbox>
1
ohiock

Merci pour les réponses ci-dessus. J'ai généralisé légèrement ce qui précède pour l'utiliser lorsque vous avez plusieurs cases à cocher dans un composant donné:

  constructor() {
    super();
    this.state = { YourInputName: false };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  render() {
    return (
      <div>
        <Checkbox
          name="YourInputName"
          onChange={this.handleCheckboxChange} />
      </div>
    );
  }

  handleCheckboxChange(event) {
    const target = event.target
    const checked = target.checked
    const name = target.name
    this.setState({
        [name]: checked,
    });
  }
0
Udugam