Detaillierte Erläuterung der reaktionskontrollierten und unkontrollierten Komponenten

Dieser Artikel führt hauptsächlich eine kurze Diskussion über reaktionsgesteuerte Komponenten und unkontrollierte Komponenten ein (Zusammenfassung). Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Wir alle wissen, dass es viele Webkomponenten gibt, die durch Benutzerinteraktion geändert werden können, wie zum Beispiel: d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e 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:

1 Eine 0d8d8502ad9fc5bd029f7f31e30fdff5-Komponente kann nicht von außen geändert werden;

2. Eine 7a7276301a860ea402f6bdc1f67f4471-Komponente, die den Wert über Requisiten festlegt, kann nur durch 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 für das Textfeld auf der jeweiligen Bearbeitungsseite lautet wie folgt:

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

Nach der Übergabe von Wert-Requisiten an die Komponente, zu der das Codesegment gehört, ist der Standardwert im Textfeld immer leer, da in Der Status, in dem sich die Seite befindet, value Der Anfangswert des entsprechenden Status ist leer, was dazu führt, dass der Wert im Status, der dem Wert entspricht, nach erfolgreicher nachfolgender asynchroner Anforderung geändert wird und weiterhin als leer angezeigt wird.

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 Eingabereaktion 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 Formkomponentenelementen 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 einer kontrollierten Komponente hinzufügt wie folgt Formular:

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, wird es immer dieser Wert sein, den der Aufrufer benötigt um die Wertänderungen der Komponente zu 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 kann die InputItem-Komponente wie folgt extern aufgerufen werden:

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

Auf diese Weise können Sie die Input-Komponente von React steuern. Tatsächlich müssen Sie zum Abschluss die Stateful-Komponente von React verwenden Dies liegt daran, dass die zustandsbehaftete Komponente den Zustand intern aufrechterhalten kann.

Unkontrollierte Komponenten

In Bezug auf den Ausdruck sind Formularkomponentenelemente in React, die kein Wertattribut hinzufügen, unkontrollierte Komponenten. Der Ausdruck lautet wie folgt:

<input type="text" />

Die unkontrollierte Komponente behält während der zugrunde liegenden Implementierung intern ihren eigenen Zustand bei. Dies zeigt, dass jede vom Benutzer eingegebene Wert auf dem Element widergespiegelt werden kann.

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
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Neue Funktionen der Webpack 4.0.0-Beta.0-Version (ausführliches Tutorial)

Vue-Komponenten und Route Lebenszyklus (ausführliches Tutorial)

Verwenden Sie SpringMVC, um domänenübergreifende Vue-Anfragen zu lösen

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!