Checkboxen-Eigenschaft in React festlegen

1. Kontrollkästchen in React
2. Setzen Sie eine Checkbox check-Eigenschaft in React

In JSX definierte Formulare sind mehr als einfache HTML-Elemente. Formulare sollen interne Daten speichern und übertragen, daher benötigen sie einen internen Status, um sie zu verwalten.

Nehmen wir als Beispiel HTML-Checkboxen. HTML-Checkboxen können in ihrem natürlichen Zustand den Wert des Attributs checked speichern. Wenn Sie jedoch eine App entwickeln, reicht es nicht aus, die Daten im internen Zustand des Elements zu speichern. Sie müssen den Wert des Attributs checked im internen Zustand Ihrer React-App speichern, damit Sie in der App darauf verweisen können.

Kontrollkästchen in React

Checkbox-Elemente in React müssen bestimmten Regeln folgen. Vor 10 Jahren war es vielleicht akzeptabel, neue Attribute für HTML-Elemente bedingt zu erstellen. Dies widerspricht den Best-Practice-Empfehlungen in React. Jedes Checkbox-Element muss mit oder ohne das Attribut checked erstellt werden.

Checkbox-Elemente, die ohne das Attribut checked initiiert wurden, sind unkontrolliert:

<input type="checkbox" name="uncontrolled"></input>

Checkbox-Elemente, die mit dem Attribut checked definiert sind, werden kontrolliert:

<input type="checkbox" checked={true} name="controlled"></input>

Ein Element <input> muss als gesteuerte oder ungesteuerte Komponente ausgelöst werden. Ein häufiger Fehler besteht darin, das Attribut checked auf null oder undefined zu setzen. Ein JavaScript-Codierer könnte erwarten, dass diese Werte automatisch in einen false booleschen Wert konvertiert werden, aber React funktioniert anders.

Verwirrender Fehler

Wenn React auf ein Attribut mit einem null oder undefined Wert stößt, ignoriert es das Attribut und rendert es nicht. Wird der Initialwert später true, erscheint wieder ein checked-Attribut, das den Wechsel von einer unkontrollierten Komponente zu einer kontrollierten auslöst.

React gibt einen Fehler aus und teilt Ihnen mit, dass Komponenten als kontrolliert oder unkontrolliert initialisiert werden müssen. Wenn die Checkbox-Komponente ohne ein checked-Attribut definiert wurde, konnten Sie später keines hinzufügen.

Viele Leute wissen nicht, dass das Setzen des Attributs checked auf ein Kontrollkästchen es als kontrollierte Komponente initialisiert. Deshalb sind sie durch die Fehlermeldung verwirrt, die lautet:

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Setzen Sie eine Checkbox check-Eigenschaft in React

Sobald Sie das Problem verstanden haben, ist es sehr einfach, es zu beheben. Wenn Sie eine kontrollierte Checkbox-Komponente erstellen möchten, müssen Sie sicherstellen, dass das Attribut checked entweder auf true oder false ausgewertet wird. Dies ist möglich, indem Sie die Eigenschaft defaultProps setzen und das Attribut checked standardmäßig auf false setzen. Hier ist ein Codebeispiel:

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}

Ein weiterer Vorteil der Verwendung von defaultProps ist, dass sie nur die Vorgabe darstellen. Der Benutzer kann weiterhin mit der App interagieren und den Status des Attributs checked ändern.

Das Setzen des Attributs checked auf true oder false würde bedeuten, dass Benutzer seinen Status nicht ändern dürfen.