Checkboxen-Eigenschaft in React festlegen
![Checkboxen-Eigenschaft in React festlegen](/img/React/feature-image---checked-property-in-react-checkbox.webp)
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.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn