Hoe maak ik gecontroleerde formulieren in Reactjs?

Gecontroleerde componenten in Reactjs maken het mogelijk om formulierinvoer af te handelen via de componentstatus.

Hier is een basaal voorbeeld van een Gecontroleerd Component in React:

```
class Formulier extends React.Component { constructor(props) { super(props); this.state = { waarde: ‘’, };

this.wijzigingVerwerken = this.wijzigingVerwerken.bind(this); this.verstuurVerwerken = this.verstuurVerwerken.bind(this); } wijzigingVerwerken(event) { this.setState({waarde: event.target.value}); // De invoerwaarde doorgeven aan de componentstatus } verstuurVerwerken(event) { alert(‘Een naam was ingediend: ‘ + this.state.waarde); event.preventDefault(); // Standaardformulierverzendgedrag voorkomen } render() { return ( ); } }

ReactDOM.render(, document.getElementById(‘root’));
```

Om het bovenstaande voorbeeld uit te pakken:

1. Wanneer de gebruiker iets in het tekstvak typt, wordt de `wijzigingVerwerken` eventhandler aangeroepen.
2. Binnen `wijzigingVerwerken`, wordt de nieuwe waarde van het tekstvak ingesteld op de componentstatus met `this.setState`.
3. De component ontvangt opnieuw een render. React ziet dat de state is veranderd en update de waarde van het tekstvak op het scherm.
4. Als de gebruiker op de submit-knop klik, wordt de `verstuurVerwerken` eventhandler aangeroepen.
5. Binnen `verstuurVerwerken`, wordt de huidige waarde van de tekstvak (wie nu opgeslagen in de status) gebruikt om een alert bericht te tonen.

Op deze manier kunt u gecontroleerde componenten maken in React. In deze componenten, neemt de enkele bron van waarheid, de state van de component, het over van de DOM. Hierdoor kunt u complexere functies gebruiken, zoals het valideren van velden, beperken van invoer, en meer.