Kontrollierte Komponenten in Reactjs sind Komponenten, die ihren aktuellen Wert durch Requisiten und ihre Änderungen durch Callbacks steuern. Hier ist eine kurze Anleitung, wie Sie ein kontrolliertes Formular in Reactjs erstellen können.
1. Erstellung einer Initial State: Sie müssen in Ihrer Komponente einen State erstellen, der die Formulardaten speichert. Dies können Sie in Ihrem Konstruktor oder der Funktion useState (wenn Sie Hooks verwenden) tun.
```javascript
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ‘’,
email: ‘’,
};
}
}
```
2. Verbindung des Formulars mit dem State: Verbinden Sie Ihr Formular mit den Zuständen, indem Sie den Wert der Zustände als die aktuellen Werte der entsprechenden Eingabe festlegen.
```javascript
render() {
return (
3. Verwaltung der Änderungen am Formular: Da Ihre Formulareingaben jetzt an den Zustand gebunden sind, müssen Sie den Zustand aktualisieren, wenn sich der Wert der Eingabe ändert. Das können Sie tun, indem Sie einen OnChange-Handler hinzufügen, der den Zustand auf den aktuellen Wert der Eingabe einstellt.
```javascript
handleNameChange(event) {
this.setState({name: event.target.value});
}
handleEmailChange(event) {
this.setState({email: event.target.value});
}
render() { return (
)4. Behandeln des Formular-Submits: Sie können eine onSubmit-Funktion hinzufügen, um mit der Übermittlung des Formulars umzugehen. Verhindern Sie das Standardverhalten des Browsers beim Absenden des Formulars mit `event.preventDefault()` und führen dann Ihre eigenen Aktionen, wie das Senden der Formulardaten an einen Server, durch.
```javascript
handleSubmit(event) {
event.preventDefault();
// handle form submission logic
}
render() { return (
)Das oben angegebene ist ein Beispiel für eine kontrollierte Komponente, die den Status in einer Klasse beinhaltet. Sie können auch die `useState` Funktion verwenden, wenn Sie Funktionskomponenten verwenden.
