ReactJS handleChange bei jeder HTML Eingabe

Question

Ich verfolge das ReactJS Tutorial auf der offiziellen Seite und bin gespannt auf eine Designauswahl. Grundsätzlich besagt das Tutorial, dass wir eine handleChange-Funktion für den OnChange-Eingang haben müssen.

handleAuthorChange: function(e) { 
    this.setState({author: e.target.value}); 
}, 

<input 
    type="text" 
    placeholder="Your name" 
    value={this.state.author} 
    onChange={this.handleAuthorChange} 
/> 

bedeutet es, wenn ich eine Form haben, die 10 Texteingaben und 3 Checkbox gibt jeder einzelne von ihnen muss eine „handleChange“ Funktion hat?

Welche Best Practices für den Umgang mit dieser Situation gibt es?

Answer 1

Nicht wirklich, Sie können nur value={this.state.author} und onChange={this.handleAuthorChange} aus dem Code entfernen, und es wird immer noch funktionieren. Wenn Sie beim Senden eines Formulars auf Ihre Eingabe verweisen möchten, verwende ich die Funktion ref in React. Es ist eine Möglichkeit, einen Verweis auf die Eingabe für die spätere Verwendung zu erstellen.

handleAuthorChange: function(e) { 
    this.setState({author: e.target.value}); 
}, 

<input 
    type="text" 
    placeholder="Your name" 
    ref={(c) => this.yourNameField = c} 
/> 

Answer 2

Es ist eine empfohlene Weg controlled components, zu verwenden, die alle inputs mit einem onChange() Handler verarbeitet. Aber Sie müssen nicht die in einem anderen Handler für jedes behandeln, können Sie alle mit onChange() mit on Handler behandeln, aber identifizieren Sie das Ziel eindeutig und setzen Sie den Wert auf den Zustand.

die Geige für ein Beispiel siehe https://jsfiddle.net/Pranesh456/ga2csaty/4/

In diesem Beispiel habe ich ein gemeinsamen onChange() Handler verwendet, aber ich eindeutig jedes Eingabefeld mit ihrer id und bevölkerte den Zustand auf dem id Basis identifiziert, die wurde als value für die Eingabefelder serviert.

Weitere Referenzprüfung React's controlled components