Wie setze ich das Standard-Kontrollkästchen ReactJS?

168

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.

Yarin Nim
quelle
6
facebook.github.io/react/docs/forms.html Überprüfen Sie den Unterschied zwischen kontrollierten und unkontrollierten Komponenten.
Zerkms

Antworten:

234

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} />
Nitishagar
quelle
Aber ich erstelle den INPUT nicht als Klasse, sondern von React.createElement. Also, wie man die Standardeinstellung
festlegt
6
@YarinNim Sie können rendermit dem obigen <input>Element verwenden. Das defaultCheckedkann als Parameter wie angegeben bereitgestellt werden checked.
Nitishagar
70

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 .

Jon Saw
quelle
2
Staatsvoll! Wie wäre es mit einem staatenlosen Ansatz?
Green
53

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

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

Gutschrift an @nash_ag

Yarin Nim
quelle
4
Dies ist nicht richtig. Sie können defaultChecked auch mit normalem HTML-Tag verwenden, wie (class => className) und (for => htmlFor) und so weiter ...
Fareed Alnamrouti
31

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

Murtaza Hussain
quelle
1
Wenn Sie den geprüften Parameter direkt verwenden, können Sie ihn nicht deaktivieren. Für diesen defaultChecked-Parameter muss verwendet werden. Vielen Dank.
Kodmanyagha
12

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

<input name="remember" type="checkbox" defaultChecked/>
Fareed Alnamrouti
quelle
1
Sollte die akzeptierte Antwort sein, da dies das ist, wonach die meisten Leute suchen werden: eine Alternative zum nativen HTML checked.
Bram Vanroy
4

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 })}
user2061097
quelle
3

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>
ponteskl
quelle
geprüft ist veraltet
Mbanda
@Mbanda Können Sie Dokumentation bereitstellen, um weitere Informationen zu diesem Thema bereitzustellen
Brad
Sie sollten dies nicht tun. Wenn Sie eine Zeichenfolge an die Eigenschaft "checked" übergeben, wird die Warnung angezeigt: "Warnung: Die Zeichenfolge truefür das boolesche Attribut wurde empfangen checked. Obwohl dies funktioniert, funktioniert es nicht wie erwartet, wenn Sie die Zeichenfolge" false "übergeben. Meinten Sie geprüft = {wahr}? "
Paul.ago
1

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})}
Rishijay Shrivastava
quelle
0

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

Südpfote
quelle
Noch eine ... Dies ist ein staatlicher Ansatz! Wie wäre es mit Staatenlosen?
Green
Grün, was meinst du?
Omarojo
0

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>
Md Fazlul Karim
quelle
0

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

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

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

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

user2903536
quelle
-2

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

Sachin R.
quelle