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 : , 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

qui maintient la valeur dans son propre état ne peut pas être modifié de l'extérieur

2. Le composant 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é

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

.

 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)}/>
    );
  }
}

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

Composants non contrôlés

<input type="text" />

Résumé

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

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

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!