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

Cet article présente principalement une brève discussion sur les composants contrôlés par réaction et les composants non contrôlés (résumé). Maintenant, je le partage avec vous et le donne comme référence.

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, étant donné que React est lié par un flux de données unidirectionnel, ces composants peuvent devenir incontrôlables :

1. Un composant 0d8d8502ad9fc5bd029f7f31e30fdff5

2. Un composant 0d8d8502ad9fc5bd029f7f31e30fdff5 qui définit la valeur via des accessoires 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 passé les accessoires de valeur au composant auquel appartient le segment de code, la valeur par défaut dans la zone de texte est toujours vide car la page est dans l'état , 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 d'une requête asynchrone ultérieure, et elle est toujours affichée 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 ; comme suit Formulaire :

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 une valeur spécifique, ce sera toujours cette valeur, donc le. l'appelant doit contrôler le changement de valeur du composant.

Cette façon d'écrire pose un problème : toute valeur saisie par l'utilisateur ne fonctionnera pas dans 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 peut être appelé en externe comme suit :

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

De cette façon, vous pouvez contrôler le composant Input de React. composant avec état de réagir pour le terminer, car le composant avec état peut maintenir 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" />

Le composant non contrôlé conserve son propre état en interne pendant l'implémentation sous-jacente ; cela montre que toute valeur saisie par l'utilisateur peut être reflétée sur l'élément.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Nouvelles fonctionnalités de la version webpack 4.0.0-beta.0 (tutoriel détaillé)

Composants Vue et Route Cycle de vie (tutoriel détaillé)

Utilisez SpringMVC pour résoudre les requêtes multi-domaines Vue

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!