Fragen über reagieren kontrollierten Textfeld?

Question

Sie können unter Beispielcode sehen, es ist ein typisches kontrolliertes Feld.

export default class NameForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    render() { 
    return (
     <form> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
    } 
} 

Ich kann das verstehen, wenn ich einen beliebigen Text in das Feld eingeben, wird der Wert in das Textfeld an die setState Funktion und den Wert Requisiten des Eingangs aufgrund widerspiegeln.

Aber wenn ich den Eingang nach unten änderte. Ich entfernte die Wert Requisiten.

<input type="text" onChange={this.handleChange} /> 

Derzeit Wenn ich einen Wert in dem Feld eingegeben, wird der Wert immer noch da sein, aber nach meiner Kenntnis von Reagieren, wird der Eingang nach dem setState, aber den Requisiten gemacht wird Wert ist nicht gesetzt, der Eingang wird meiner Meinung nach gelöscht, Könnten Sie das bitte im Detail für mich erklären?

Answer 1

Ich denke, Sie vermissen den wichtigen Punkt hier. Nachdem setState aufgerufen wurde, wird die Komponente rendern aufgerufen - aber dies wird die Eingabekomponente nicht von Grund auf neu erstellen. Intern reagieren prüft und wendet nur Änderungen an, die dem eigentlichen DOM passiert sind.

In Ihrem Fall wurden keine Unterschiede zur Eingabe gemacht - daher bleibt es so wie es ist.

Dieser Prozess heißt reconciliation und Sie können mehr darüber lesen here.

Answer 2

Sie nicht die value Einstellung werden sollte, sondern nur die defaultValue, wie diese

<input type="text" defaultValue={this.state.value} 

The handleChange wird dann der Staat sicherstellen, dass

Answer 3

Einstellwert auf ein Eingabeelement aktualisiert wird, macht es eine kontrollierte Eingang. Kontrollierte Eingänge zeigen immer den in ihrer Stütze bereitgestellten Wert an. Wenn Sie zum Beispiel haben diese Eingabe:

<input value='constant' onChange={({target: {value}}) => this.setState({value})}/>

Den Benutzer kann seinen Wert nicht ändern. Aber wenn Sie keine Wertstütze für Ihre Eingabe bereitstellen, ist es kein kontrollierter Wert und es zeigt den Wert an, den der Benutzer eingibt. Dasselbe gilt für Ankreuzfelder, Optionsfelder usw.

Also in Ihrem Fall wird es aktualisiert auf Benutzereingaben, weil es keine kontrollierte Komponente ist (weil Sie keinen Wert dafür angegeben haben.) Wenn Sie den Anfangswert für eine Komponente festlegen, aber unkontrolliert lassen möchten (der Benutzer kann den Wert der Komponente ändern), können Sie die Initiale setzen Wert mit defaultValue prop.

Sie können hier mehr lesen: https://facebook.github.io/react/docs/forms.html