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

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.

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

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 .

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

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

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

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

Ç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 })}

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>

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})}

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

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>

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);
      })
  }

 <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é

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 :)