Detaillierte Erläuterung der reaktionskontrollierten und unkontrollierten Komponenten

Wir alle wissen, dass es viele Webkomponenten gibt, die durch Benutzerinteraktion geändert werden können, wie zum Beispiel: , oder der Rich-Text-Editor, den ich jetzt verwende. Diese Komponenten sind in der täglichen Entwicklung sehr unauffällig. Wir können den Wert der Komponente leicht ändern, indem wir Inhalte eingeben oder das Wertattribut des Elements festlegen. Da React jedoch an den unidirektionalen Datenfluss gebunden ist, können diese Komponenten außer Kontrolle geraten: In diesem Artikel werden Ihnen hauptsächlich von React kontrollierte und unkontrollierte Komponenten vorgestellt, und ich hoffe, dass er Ihnen helfen kann.

1. Eine

2 Die

-Komponente kann nur über eine externe Steuerung aktualisiert werden.

Ich bin kürzlich auf ein Problem gestoßen, als ich eine reaktionsbasierte Ant-Design-UI-Komponente verwendet habe, die von Ant Financial erstellt wurde. Beim Bearbeiten der Seite werden die Daten vor dem Speichern angezeigt, aber die Verwendung von defaultValue funktioniert nicht. Das Eingabefeld ist anstelle des spezifischen eingehenden Werts immer leer. Der Code, der sich auf das Textfeld auf der jeweiligen Bearbeitungsseite bezieht, lautet wie folgt:

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

Nach der Übergabe von Werteigenschaften an die Komponente, zu der das Codesegment gehört, ist dies die Standardeinstellung Der Wert im Textfeld ist immer leer, da in dem Status, in dem sich die Seite befindet, der Anfangswert des Status, der dem Wert entspricht, leer ist, was dazu führt, dass der Wert im Status, der dem Wert entspricht, geändert wird, nachdem nachfolgende asynchrone Anforderungen erfolgreich sind , und es wird weiterhin als leer angezeigt.

Google den konkreten Grund. Es stellt sich heraus, dass nach der Übergabe des defaultValue in der Formularkomponente von React nachfolgende Änderungen am defaultValue keine Auswirkung haben und ignoriert werden.

Konkret handelt es sich hierbei um eine unkontrollierte Reaktionskomponente. Ihr Zustand wird innerhalb der Reaktion der Eingabe gesteuert und wird nicht vom Aufrufer gesteuert. Dies kann durch gesteuerte Komponenten erreicht werden.

Lassen Sie uns über die kontrollierte Komponente und die unkontrollierte Komponente sprechen. Sie basieren alle auf den Formularkomponentenelementen von React. Weitere Informationen finden Sie auch auf der offiziellen Website von React.

Kontrollierte Komponente

Formal gesehen ist eine kontrollierte Komponente das Hinzufügen eines Wertattributs zu einer Formularkomponente; eine unkontrollierte Komponente ist eine Komponente, die kein Wertattribut hinzufügt Das Formular lautet wie folgt:

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

Formularkomponentenelemente mit hinzugefügten Wertattributen behalten intern ihren eigenen Status nicht bei, sobald der Wert der Komponente auf einen bestimmten Wert festgelegt ist value ist immer dieser Wert, daher muss der Aufrufer die Änderung des Komponentenwerts steuern.

Diese Schreibweise bringt ein Problem mit sich: Jeder vom Benutzer eingegebene Wert funktioniert nicht in der Benutzerinteraktion der gerenderten Eingabekomponente und der Wert im Eingabefeld ist immer Hallo!. Dies steht im Widerspruch zum Eingabeverhalten in HTML.

Um die Komponente zu steuern, müssen Sie daher in der Lage sein, den Wert der Eingabekomponente zu steuern. Sie müssen ihren internen Status verwenden, das heißt, ein Status muss innerhalb der Komponente aufrechterhalten werden Um mit den Methoden onChange und setState der Komponente zusammenzuarbeiten, kann das obige Formular beispielsweise in eine InputItem-Komponente gekapselt werden, die intern einen Status verwaltet:

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

Auf diese Weise können Sie die InputItem-Komponente extern wie folgt aufrufen:

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

Dabei Auf diese Weise können Sie die Eingabekomponente von React steuern. Tatsächlich müssen Sie zur Vervollständigung die Stateful-Komponente von React verwenden, da Stateful-Komponenten den Status intern aufrechterhalten können.

Unkontrollierte Komponenten

Ausdrucksmäßig sind Formularkomponentenelemente in React, die kein Wertattribut hinzufügen, unkontrollierte Komponenten. Der Ausdruck lautet wie folgt:

<input type="text" />

Wenn die zugrunde liegende Implementierung implementiert ist, behält die unkontrollierte Komponente intern ihren eigenen Zustand bei; dies zeigt, dass jeder vom Benutzer eingegebene Wert möglich ist Reagieren Sie auf Elemente.

Zusammenfassung

Bei der Verwendung von Reaktionskomponenten stoßen Sie auf kontrollierte Komponenten oder unkontrollierte Komponenten. Derzeit wird die Verwendung von zustandslosen Komponenten für Reaktionskomponenten empfohlen, aber die Verwendung dieser Komponente ist nicht groß Problem bei der Verwendung unkontrollierter Komponenten bei der Implementierung von Reaktionskomponenten im Formular. Wenn Sie kontrollierte Elemente steuern müssen, treten Probleme auf, wie in: „Kontrollierte Komponenten“ müssen aktiv einen internen Status aufrechterhalten „Zustandslose Komponente“ muss den Zustand der Komponente nicht aufrechterhalten, daher stehen die beiden im Konflikt.

Daher können kontrollierte Elemente nicht mit zustandslosen Komponenten erstellt werden.

Angesichts der Eigenschaften kontrollierter Komponenten und unkontrollierter Komponenten unterscheiden sich auch die Anwendungsorte der beiden, hauptsächlich in:

Kontrollierte Elemente werden im Allgemeinen in Situationen verwendet wobei sein Anfangswert dynamisch festgelegt werden muss; wenn beispielsweise einige Formularinformationen bearbeitet werden, muss das Eingabeformularelement zunächst einen bestimmten vom Server zurückgegebenen Wert anzeigen und ihn dann bearbeiten.
Unkontrollierte Elemente, die im Allgemeinen verwendet werden, wenn keine dynamischen Anfangswertinformationen vorhanden sind. Wenn beispielsweise Informationen in einem Formular erstellt werden, haben die Eingabeformularelemente keinen Anfangswert und erfordern eine Benutzereingabe
Verwandte Empfehlungen:

Detaillierte Erläuterung der kontrollierten und unkontrollierten Komponenten von React

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der reaktionskontrollierten und unkontrollierten Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!