Wie setze ich das Standard-Kontrollkästchen ReactJS?

Ich habe Probleme beim Aktualisieren des Kontrollkästchenstatus, nachdem ihm checked="checked"in React der Standardwert zugewiesen wurde .

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

Nach dem Zuweisen checked="checked"kann ich den Status des Kontrollkästchens nicht durch Klicken zum Deaktivieren / Aktivieren aktivieren.

Um mit dem Kontrollkästchen zu interagieren, müssen Sie den Status des Kontrollkästchens aktualisieren, sobald Sie es ändern. Und um eine Standardeinstellung zu haben, können Sie verwenden defaultChecked.

Ein Beispiel:

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

Es gibt einige Möglichkeiten, dies zu erreichen. Hier einige:

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

Hier ist eine Live-Demo auf JSBin .

Geschrieben mit Komponenten :

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

Hier ist eine Live-Demo auf JSBin .

Wenn das Kontrollkästchen nur mit erstellt React.createElementwird, wird die Eigenschaft defaultCheckedverwendet.

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

Gutschrift an @nash_ag

Im Render-Lebenszyklus von React überschreibt das value-Attribut für Formularelemente den Wert im DOM. Bei einer unkontrollierten Komponente möchten Sie häufig, dass React den Anfangswert angibt, nachfolgende Aktualisierungen jedoch unkontrolliert lassen. Um diesen Fall zu behandeln, können Sie anstelle von value ein Attribut defaultValue oder defaultChecked angeben.

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

Oder

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

Weitere Informationen defaultCheckedzum Kontrollkästchen finden Sie unten: https://reactjs.org/docs/uncontrolled-components.html#default-values

Zusätzlich zur richtigen Antwort können Sie einfach Folgendes tun: P.

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

Es funktioniert

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

Und Funktion init es

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

Sie können "true" oder "" an die aktivierte Eigenschaft des Eingabe-Kontrollkästchens übergeben. Die leeren Anführungszeichen ("") werden als falsch verstanden und das Element wird deaktiviert.

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>

In meinem Fall hatte ich das Gefühl, dass "defaultChecked" mit Zuständen / Bedingungen nicht richtig funktioniert. Also habe ich "checked" mit "onChange" verwendet, um den Status umzuschalten.

Z.B.

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

Hier ist ein Code, den ich vor einiger Zeit gemacht habe. Er könnte nützlich sein. du musst mit dieser Zeile spielen => this.state = {geprüft: falsch, geprüft2: wahr};

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>

Hier ist der Codepen => http://codepen.io/parlop/pen/EKmaWM

Mach es dir nicht zu schwer. Verstehen Sie zunächst ein einfaches Beispiel, das unten angegeben ist. Es wird dir klar sein. In diesem Fall wird unmittelbar nach dem Drücken des Kontrollkästchens der Wert aus dem Status abgerufen (anfangs ist er falsch), in einen anderen Wert geändert (anfangs ist er wahr) und der Status entsprechend festgelegt. Wenn das Kontrollkästchen zum zweiten Mal gedrückt wird, wird der gleiche Vorgang erneut ausgeführt. Nehmen Sie den Wert (jetzt ist er wahr), ändern Sie ihn (in false) und setzen Sie den Status entsprechend (jetzt ist er wieder false. Der Code wird unten geteilt.

Teil 1

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

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

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

Dies kann mit reinem js erfolgen

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

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

Das obige Handle gibt den Wert true oder false an, wenn aktiviert oder deaktiviert

Ich habe den Status als einen beliebigen [] Typ festgelegt. und setzen Sie im Konstruktor den Status auf 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)
    }))
}

Im Eingabeelement

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

Ich habe es nach einiger Zeit herausgefunden. Ich dachte, es könnte euch allen helfen :)