Erstellen eines Registrierungsformulars mit zustandslosen Komponenten?

Question

Kann mir jemand Beispielcode/Erklärung zeigen, wie man ein Formular mit zustandslosen Komponenten erstellt?

Ich konnte auch kein Material UI Formular Beispiel mit Refs finden.

Hinweis: Ich verwende Material UI-Komponenten.

Hier ist meine aktuelle schaffen Form:

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '', 
     school: '', 
     }; 
} 


    /*in order to access state from within function, I had to bind this when I made 
    the call to submitCandidate i.e. onClick={this.submitCandidate.bind(this)} 
    */ 
    submitCandidate(event){ 
    event.preventDefault(); 
    //assign the form fields to candidates object 
    var newCandidate = { 
     name: this.state.name, 
     school: this.state.school, 
     date: this.state.date 
    } 
    //inserts candidates object to database 
    Candidates.insert(newCandidate); 

    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
     <div> 
     <TextField 
      hintText={"Enter Your Name"} 
      floatingLabelText={"Name"} 
      value={this.state.name} 
      onChange={e => this.setState({ name: e.target.value })} 
     /> 
     <TextField 
      hintText={"Enter Your School"} 
      floatingLabelText={"School"} 
      value={this.state.school} 
      onChange={e => this.setState({ school: e.target.value })} 
     /> 

     <RaisedButton type="submit" label="Submit" onClick={this.submitCandidate.bind(this)} /> 

      </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

Answer 1

Stateless Komponente bedeutet, dass sie den Zustand nicht speichern kann. Ihr Zustand muss also woanders gespeichert werden. Bevorzugter Staatsspeicher ist heutzutage Redux.

Nicht sicher, ob Sie mit Redux vertraut sind. Wenn nicht, empfehle ich zu sehen insanely famous Dan Abramov's (Redux creator) Egghead.io series.

Wenn Sie sich daran gewöhnt haben, wie Redux FLUX-Muster implementiert, können Sie Ihren Status (name und school) in Redux speichern. Dieser Status wird durch Redux-Aktionen aktualisiert. Diese Funktionen werden über props sowie Aktualisierungen des Status an Ihre Komponente übergeben.

EDIT 2017-05:

Wir begannen Bibliothek namens redux-form für + Redux Anwendung Reagieren Formen im Umgang. Es eliminiert eine Menge Boilerplate, ist sehr überprüfbar. Also würde ich definitiv empfehlen, es zu benutzen.