Explication détaillée des composants contrôlés par réaction et des composants non contrôlés

Nous savons tous qu'il existe de nombreux composants Web qui peuvent être modifiés par l'interaction de l'utilisateur, tels que : d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e ou l'éditeur de texte enrichi que j'utilise actuellement. Ces composants sont très discrets dans le développement quotidien. Nous pouvons facilement modifier la valeur du composant en entrant du contenu ou en définissant l'attribut value de l'élément. Cependant, comme React est lié par un flux de données unidirectionnel, ces composants peuvent devenir incontrôlables : cet article vous présente principalement les composants contrôlés et non contrôlés de React, et j'espère qu'il pourra vous aider.

1. Un composant 0d8d8502ad9fc5bd029f7f31e30fdff5 qui maintient la valeur dans son propre état ne peut pas être modifié de l'extérieur

2. Le composant 0d8d8502ad9fc5bd029f7f31e30fdff5 ne peut être mis à jour que via un contrôle externe.

J'ai récemment rencontré un problème lors de l'utilisation d'un composant d'interface utilisateur Ant-Design basé sur React produit par Ant Financial. Lors de la modification de la page, la zone de saisie affichera les données avant de les enregistrer, mais l'utilisation de defaultValue ne fonctionne pas. la zone de saisie est toujours vide au lieu de la valeur entrante spécifique. Le code lié à la zone de texte dans la page d'édition spécifique est le suivant :

    ... //render方法上面的内容省略
 <FormItem
   label="问题描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

Après avoir transmis les accessoires de valeur au composant auquel appartient le segment de code, la valeur par défaut La valeur dans la zone de texte est toujours vide, car dans l'état où se trouve la page, la valeur initiale de l'état correspondant à la valeur est vide, ce qui entraîne la modification de la valeur dans l'état correspondant à la valeur après la réussite des requêtes asynchrones suivantes. , et il sera toujours affiché comme vide.

Google la raison spécifique. Il s'avère qu'une fois la valeur par défaut dans le composant de formulaire de React passée, les modifications ultérieures apportées à la valeur par défaut n'auront aucun effet et seront ignorées.

Plus précisément, il s'agit d'un composant de réaction non contrôlé. Son état est contrôlé dans la réaction d'entrée et n'est pas contrôlé par l'appelant. Ceci peut être réalisé en utilisant des composants contrôlés.

Parlons du composant contrôlé et du composant non contrôlé. Ils sont tous basés sur les éléments du composant de formulaire de réaction. Pour plus de détails, vous pouvez également vous référer au site officiel de réaction pour cette introduction

Composant contrôlé

Formellement parlant, un composant contrôlé consiste à ajouter un attribut de valeur à un composant de formulaire ; un composant non contrôlé est un composant qui n'ajoute pas d'attribut de valeur ; Le formulaire est le suivant :

render: function() {
  return <input type="text" value="Hello!" />;
 }

Les éléments du composant de formulaire avec des attributs de valeur ajoutés ne conserveront pas leur propre état en interne une fois que la valeur du composant est définie sur un paramètre spécifique. value est toujours cette valeur, l'appelant doit donc contrôler le changement de la valeur du composant.

Cette façon d'écrire pose un problème : toute valeur saisie par l'utilisateur ne fonctionnera pas lors de l'interaction utilisateur du composant d'entrée rendu, et la valeur dans la zone de saisie est toujours Hello !. Ceci est incompatible avec le comportement de saisie en HTML.

Pour cette raison, afin de contrôler le composant, vous devez pouvoir contrôler la valeur du composant d'entrée. Vous devez utiliser son état interne, c'est-à-dire qu'un état doit être maintenu à l'intérieur du composant. pour coopérer avec les méthodes onChange et setState du composant d'entrée ; par exemple, le formulaire ci-dessus peut être encapsulé dans un composant inputItem, qui maintient un état en interne. Le code spécifique est le suivant :

.

 export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

De cette façon, le composant InputItem est appelé en externe comme suit :

<InputItem value={this.state.userName} />

De cette façon, vous pouvez contrôler le composant Input de React. En fait, vous devez utiliser le composant avec état de React pour le compléter, car les composants avec état peuvent conserver l'état en interne.

Composants non contrôlés

En termes d'expression, les éléments de composant de formulaire en réaction qui n'ajoutent pas d'attribut de valeur sont des composants non contrôlés. L'expression est la suivante :

<input type="text" />

Lorsque l'implémentation sous-jacente est implémentée, le composant non contrôlé maintient son propre état en interne, ce qui montre que toute valeur saisie par l'utilisateur peut ; Réagissez aux éléments.

Résumé

Lors de l'utilisation du composant React, vous rencontrerez des composants contrôlés ou des composants non contrôlés à l'heure actuelle, les composants React recommandent d'utiliser des composants sans état, mais en utilisant ceci, il n'y a pas grand chose ; problème lors de l'utilisation de composants non contrôlés lors de l'implémentation de composants de réaction dans le formulaire. Si vous devez contrôler des éléments contrôlés, il y aura des problèmes, qui se manifesteront par :

Les « composants contrôlés » doivent maintenir activement un état interne avec état, tandis que le « composant sans état » n'a pas besoin de maintenir l'état du composant, donc les deux sont en conflit.

Par conséquent, les éléments contrôlés ne peuvent pas être créés à l'aide de composants sans état.

Compte tenu des caractéristiques des composants contrôlés et des composants non contrôlés, les lieux d'application des deux sont également différents, principalement dans :

1. Les éléments contrôlés sont généralement utilisés dans les situations où sa valeur initiale doit être définie dynamiquement ; par exemple, lors de la modification de certaines informations du formulaire, l'élément du formulaire d'entrée doit initialement afficher une certaine valeur renvoyée par le serveur, puis la modifier.

2. Éléments non contrôlés, généralement utilisés lorsqu'il n'y a pas d'informations de valeur initiale dynamique ; par exemple, lors de la création d'informations dans un formulaire, les éléments du formulaire de saisie n'ont pas de valeur initiale et nécessitent une saisie de l'utilisateur

Recommandations associées :

Explication détaillée des composants contrôlés et des composants non contrôlés de 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!