Comment définir la case à cocher par défaut Cochée dans ReactJS?


169

J'ai du mal à mettre à jour l'état de la case à cocher après son attribution avec la valeur par défaut checked="checked"dans React.

var rCheck = React.createElement('input',
                                 {type: 'checkbox', checked:'checked', value: true},
                                 'Check here');

Après l'attribution checked="checked", je ne peux pas interagir avec l'état de la case à cocher en cliquant pour décocher / cocher.


6
facebook.github.io/react/docs/forms.html Vérifiez la différence entre les composants contrôlés et non contrôlés.
zerkms

Réponses:


235

Pour interagir avec la case, vous devez mettre à jour l'état de la case une fois que vous la modifiez. Et pour avoir un paramètre par défaut, vous pouvez utiliser defaultChecked.

Un exemple:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

mais je ne crée pas INPUT en tant que classe, il est créé par React.createElement. Alors, comment définir la valeur par défaut
Yarin Nim

6
@YarinNim Vous pouvez utiliser renderavec l' <input>élément ci-dessus . Le defaultCheckedpeut être fourni comme un paramètre comme l' checkedest.
nitishagar

71

Il y a plusieurs façons d'y parvenir, en voici quelques-unes:

Écrit à l'aide de State Hooks :

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

  return (
    <label>
      <input type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

Voici une démo en direct sur JSBin .

Écrit à l'aide de composants :

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

Voici une démo en direct sur JSBin .


3
État plein! Qu'en est-il de l'approche apatride?
Vert

53

Si la case à cocher est créée uniquement avec, React.createElementla propriété defaultCheckedest utilisée.

React.createElement('input',{type: 'checkbox', defaultChecked: false});

Crédit à @nash_ag


4
ce n'est pas correct, vous pouvez utiliser defaultChecked également avec une balise html normale, comme (class => className) et (for => htmlFor) et ainsi de suite ...
Tarif Alnamrouti

31

Dans le cycle de vie du rendu React, l'attribut value sur les éléments de formulaire remplacera la valeur dans le DOM. Avec un composant incontrôlé, vous voulez souvent que React spécifie la valeur initiale, mais laissez les mises à jour ultérieures non contrôlées. Pour gérer ce cas, vous pouvez spécifier un attribut defaultValue ou defaultChecked au lieu d'une valeur.

        <input
          type="checkbox"
          defaultChecked={true}
        />

Ou

React.createElement('input',{type: 'checkbox', defaultChecked: true});

Veuillez consulter plus de détails concernant la defaultCheckedcase à cocher ci-dessous: https://reactjs.org/docs/uncontrolled-components.html#default-values


1
si vous utilisez directement le paramètre vérifié, vous ne pouvez pas le décocher. pour ce paramètre defaultChecked doit être utilisé. Merci.
kodmanyagha le

12

en plus de la bonne réponse, vous pouvez simplement faire: P

<input name="remember" type="checkbox" defaultChecked/>

1
Cela devrait être la réponse acceptée, car c'est ce que la plupart des gens recherchent: une alternative au HTML natif checked.
Bram Vanroy

4

Ça marche

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

Et fonction de l'initier

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

3

Vous pouvez passer "true" ou "" à la case à cocher de propriété cochée d'entrée. Les guillemets vides ("") seront considérés comme faux et l'élément sera décoché.

let checked = variable === value ? "true" : "";
<input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/>
<label className="form-check-label">{variable}</label>

vérifié est obsolète
Mbanda

@Mbanda Pouvez-vous fournir de la documentation pour fournir plus d'informations à ce sujet
Brad

Vous ne devriez pas faire ça. Si vous passez une chaîne à la propriété "vérifié", vous obtiendrez l'avertissement: "Attention: a reçu la chaîne truede l'attribut booléen checked. Bien que cela fonctionne, cela ne fonctionnera pas comme prévu si vous transmettez la chaîne" false ". Vouliez-vous dire vérifié = {vrai}? "
paul.ago

1

Dans mon cas, j'ai senti que "defaultChecked" ne fonctionnait pas correctement avec les états / conditions. J'ai donc utilisé "vérifié" avec "onChange" pour basculer l'état.

Par exemple.

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

0

Voici un code que j'ai fait il y a quelque temps, cela pourrait être utile. vous devez jouer avec cette ligne => this.state = {vérifié: faux, vérifié2: vrai};

class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>

      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>

    </div>;
  }
}

ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

voici le codepen => http://codepen.io/parlop/pen/EKmaWM


Encore une autre ... C'est une approche complète! Et les apatrides?
Vert

Vert, qu'est-ce que tu veux dire?
omarojo

0

Ne rendez pas les choses trop difficiles. Tout d'abord, comprenez un exemple simple donné ci-dessous. Ce sera clair pour vous. Dans ce cas, juste après avoir appuyé sur la case à cocher, nous allons récupérer la valeur de l'état (initialement c'est faux), la changer en une autre valeur (initialement c'est vrai) et définir l'état en conséquence. Si la case à cocher est activée pour la deuxième fois, il refera le même processus. Saisir la valeur (maintenant c'est vrai), la changer (en faux) et ensuite définir l'état en conséquence (maintenant c'est à nouveau faux. Le code est partagé ci-dessous.

Partie 1

state = {
  verified: false
} // The verified state is now false

Partie 2

verifiedChange = e => {
  // e.preventDefault(); It's not needed
  const { verified } = e.target;
  this.setState({
    verified: !this.state.verified // It will make the default state value(false) at Part 1 to true 
  });
}; 

Partie 3

  <form> 
      <input
          type="checkbox"
          name="verified"
          id="verified"
          onChange={this.verifiedChange} // Triggers the function in the Part 2
          value={this.state.verified}
      />
      <label for="verified">
      <small>Verified</small>
      </label>
  </form>

0

cela peut être fait avec pur js

              <Form.Group controlId="categoryStatus">
                <Form.Check
                  type="checkbox"
                  label="Category Status Active/In-active"
                  onChange={this.handleChecked}                 
                />
              </Form.Group>
  //Load category to form : to edit
  GetCategoryById(id) {
    this.UpdateId = id
    axios.get('http://localhost:4000/Category/edit/' + id)
      .then(response => {
        this.setState({
          category_name: response.data.category_name,
          category_description: response.data.category_description,
          is_active: response.data.is_active,
        });

        response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
      })
      .catch(function (error) {
        console.log(error);
      })
  }


-2
 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange (événement) {

console.log("event",event.target.checked)   }

la poignée ci-dessus vous donne la valeur true ou false une fois coché ou non coché


-2

J'ai défini l'état comme n'importe quel type []. et dans le constructeur, définissez l'état sur null.

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

Dans l'élément d'entrée

this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />

Je l'ai compris après un certain temps. Je pensais que cela pourrait vous aider :)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.