Quels sont les composants contrôlés en réaction

Dans React, un composant contrôlé est un composant qui utilise l'état pour obtenir et définir la valeur d'un élément d'entrée ; on peut également comprendre que le composant React qui restitue le formulaire contrôle également les opérations qui se produisent sur le formulaire pendant l'utilisateur. processus d'entrée, et est contrôlé par React de cette manière. L'élément d'entrée du formulaire qui prend une valeur est appelé un composant contrôlé.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Que sont les composants contrôlés dans React ? Le site officiel de React explique les composants contrôlés comme ceci : Le composant React qui restitue le formulaire contrôle également les opérations qui se produisent sur le formulaire lors de la saisie de l'utilisateur. Les éléments d'entrée de formulaire dont les valeurs sont ainsi contrôlées par React sont appelés « composants contrôlés ».

Les composants qui utilisent l'état pour obtenir et définir la valeur des éléments d'entrée sont appelés composants contrôlés. Les balises telles que 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3 et 221f08282418e2996498697df914ce4e peuvent toutes utiliser l'attribut value pour implémenter des composants contrôlés.

Certains internautes ont expliqué ceci : Dans React, chaque fois que l'état du formulaire change, il sera écrit dans l'état du composant. Ce type de composant est appelé composant contrôlé dans React.

Processus de mise à jour des composants contrôlés :

1, vous pouvez définir la valeur par défaut du formulaire dans l'état initial

2, chaque fois que la valeur du formulaire change, appelez le gestionnaire d'événements onChange,

3, gestionnaire d'événements Get l'état modifié via l'objet événement e et change l'état

4, setState déclenche la mise à jour de la vue et termine la mise à jour de la valeur du composant du formulaire

Exemple : entrée

- Empêcher la soumission du formulaire

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

- type de fichier input

// file类型的input，属性value是只读的，所以是非受控组件
<input type="file" />

apprentissage recommandé : "

tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!