Come impostare l'impostazione predefinita Selezionato nella casella di controllo ReactJS?

Ho problemi ad aggiornare lo stato della casella dopo che è stato assegnato con il valore predefinito checked="checked"in React.

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

Dopo l'assegnazione checked="checked", non posso interagire con lo stato della casella facendo clic per deselezionare / selezionare.

Per interagire con la casella è necessario aggiornare lo stato della casella di controllo una volta modificata. E per avere un'impostazione predefinita puoi usare defaultChecked.

Un esempio:

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

Ci sono alcuni modi per farlo, eccone alcuni:

Scritto usando 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'),
);

Ecco una demo live su JSBin .

Scritto utilizzando i componenti :

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'),
);

Ecco una demo live su JSBin .

Se la casella di controllo viene creata solo con React.createElement, defaultCheckedviene utilizzata la proprietà .

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

Ringraziamo @nash_ag

Nel ciclo di vita del rendering React, l'attributo value sugli elementi del modulo sovrascriverà il valore nel DOM. Con un componente non controllato, spesso si desidera che React specifichi il valore iniziale, ma che non vengano controllati gli aggiornamenti successivi. Per gestire questo caso, è possibile specificare un attributo defaultValue o defaultChecked invece di value.

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

O

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

Per maggiori dettagli, consulta la defaultCheckedcasella di controllo seguente: https://reactjs.org/docs/uncontrolled-components.html#default-values

oltre alla risposta corretta puoi semplicemente fare: P

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

Funziona

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

E funzione iniziarlo

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

È possibile passare "vero" o "" alla casella di controllo proprietà selezionata dell'input. Le virgolette vuote ("") verranno interpretate come false e l'elemento verrà deselezionato.

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>

Nel mio caso ho sentito che "defaultChecked" non funzionava correttamente con stati / condizioni. Quindi ho usato "controllato" con "onChange" per cambiare lo stato.

Per esempio.

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

Ecco un codice che ho fatto qualche tempo fa, potrebbe essere utile. devi giocare con questa linea => this.state = {checked: false, checked2: true};

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>

ecco il codepen => http://codepen.io/parlop/pen/EKmaWM

Non renderlo troppo difficile. Innanzitutto, comprendi un semplice esempio riportato di seguito. Ti sarà chiaro. In questo caso, subito dopo aver premuto la casella di controllo, prenderemo il valore dallo stato (inizialmente è falso), lo cambieremo in un altro valore (inizialmente è vero) e imposteremo lo stato di conseguenza. Se la casella di controllo viene premuta per la seconda volta, eseguirà nuovamente lo stesso processo. Afferrando il valore (ora è vero), modificalo (in falso) e quindi imposta lo stato di conseguenza (ora è di nuovo falso. Il codice è condiviso di seguito.

Parte 1

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

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

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

questo può essere fatto con js puri

              <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 (evento) {

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

la maniglia sopra ti dà il valore di vero o falso su spuntato o non verificato

Ho impostato lo stato come qualsiasi tipo []. e nel costruttore impostare lo stato su 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)
    }))
}

Nell'elemento di input

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

L'ho capito dopo un po 'di tempo. Ho pensato che potesse aiutarti tutti :)