Formulaires et événements React
Dans ce chapitre, nous verrons comment utiliser les formulaires dans React.
Les éléments de formulaire HTML diffèrent des autres éléments DOM dans React, car les éléments de formulaire conservent naturellement un certain état interne.
En HTML, les éléments de formulaire tels que <input>, <textarea> et <select> maintiennent leur propre état et se mettent à jour en fonction des saisies de l'utilisateur. Mais dans React, l'état mutable est généralement stocké dans la propriété state du composant, et ne peut être mis à jour qu'avec la méthode setState().
Un exemple simple
Dans l'exemple, nous définissons la valeur de l'entréevalue = {this.state.data}. Lorsque la valeur de l'entrée change, nous pouvons mettre à jour l'état. Nous pouvons utiliser l'événementonChangepour écouter les changements dans l'entrée et modifier l'état.
Exemple React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Exemple Hello !'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Essayez-le vous-même »
Le code ci-dessus affichera un élément input avec la valeur "Hello Example!" et réagira pour mettre à jour la valeur saisie par l'utilisateur via l'événement onChange.
Exemple 2
Dans l'exemple suivant, nous allons démontrer comment utiliser des formulaires sur un composant enfant.onChangeLa méthode déclenchera la mise à jour du state et transmettra la valeur mise à jour au champ input du composant enfantvaluevalue pour ré-afficher l'interface.
Vous devez créer un gestionnaire d'événement dans le composant parent (handleChange) et le passer en tant que prop (updateStateProp) à votre composant enfant.
Exemple React
class Content extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Bonjour Exemple !' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp={value} updateStateProp={this.handleChange} />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloMessage />);
Essayez-le vous-même »
Menu déroulant de sélection
Dans React, vous n'utilisez pas l'attribut selected ; à la place, vous utilisez l'attribut value sur la balise select racine pour indiquer l'élément sélectionné.
Exemple React
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Votre saveur préférée est : ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Choisissez votre site web préféré
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">Example</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<FlavorForm />
);
Essayez-le vous-même »
Formulaires multiples
Lorsque vous devez gérer plusieurs éléments input, vous pouvez ajouter un attribut name à chaque élément, afin que la fonction de gestion, en fonction de la valeur deevent.target.name, décide quoi faire.
Exemple React
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Partir :
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Nombre de visiteurs :
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
Essayez-le vous-même »
Événements React
L'exemple suivant montre comment modifier les données via l'événement onClick :
Exemple React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Exemple Hello !'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>Cliquez ici</button>
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Essayez-le vous-même »
Lorsque vous devez mettre à jour l'étatstatedu composant parent, vous devez créer un gestionnaire d'événement dans le composant parent (handleChange) et le passer en tant que prop (updateStateProp) à votre composant enfant.
Exemple React
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>Cliquez-moi</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Exemple Hello !'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Example'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Essayez-le vous-même »
Autres extensions