Setzen eines Zustandes in react.js mit Zwei-Wege-Bindung

Question

Ich arbeite in einem Projekt mit react.js und fire-base, ich habe ein Formular, wenn ich die Eingabe mit meinem Zustand, der mit Daten des Feuers gefüllt ist -Base, und funktioniert, ich kann aktualisieren und neue Registrierung erstellen, aber ich denke, dass meine onChangeHandle() für die Eingaben nicht die richtige Methode ist, es zu tun.

This is my form: 
render(){ 
     return (
      <div className="row"> 
       <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div> 
      <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 

        <div className="form-group"> 
         <label >Nombre de Proyecto</label> 
         <input type='text' value={this.state.proyectName} onChange={(event)=>this.onChangeHandle('p',event)}className="form-control" id="project_name"/> 

        </div> 
        <div className="form-group"> 
         <label >Inspiracion</label> 
         <textarea value={this.state.inspiration} onChange={(event)=>this.onChangeHandle('i',event)} rows="4" cols="50" className="form-control" id="inspiration"/> 

        </div> 
        <div className="form-group"> 
         <label >Que problema resuelve</label> 
         <textarea value={this.state.whatDoes} onChange={(event)=>this.onChangeHandle('w',event)} rows="4" cols="50" className="form-control" id="what_does"/> 

        </div> 
        <div className="form-group"> 
         <label >Como esta hecho</label> 
         <textarea value={this.state.howBuild} onChange={(event)=>this.onChangeHandle('h',event)} rows="4" cols="50" className="form-control" id="how_build"/> 

        </div> 
        <div className="form-group"> 
         <label >Integrantes</label> 
         <input type='text' className="form-control" id="team"/> 

        </div> 

        <div className="form-group"> 

         <button className="form-control btn btn-primary" onClick={()=>this.writeStartupData()} >Agregar </button> 

        </div> 

      </div> 
      </div> 
     ) 
    } 

Und hier ist mein Event-Handler:

onChangeHandle(exp,event){ 
     switch(exp){ 
      case "p": 
       this.setState({ 
       proyectName: event.target.value,  
       }); 
       break; 
      case "i": 
       this.setState({ 
       inspiration: event.target.value,  
       }); 
       break; 
      case "w": 
       this.setState({ 
       whatDoes: event.target.value,  
       }); 
       break; 
      case "h": 
       this.setState({ 
       howBuild: event.target.value,  
       }); 
       break; 
      case "t": 
       this.setState({ 
       team: event.target.value,  
       }); 
       break; 
     } 
    } 

Answer 1

Ich glaube, Sie so etwas tun sollte.

<div className="form-group"> 
    <label >something</label> 
    <input 
     type='text' 
     value={this.state.something} 
     onChange={event => this.setState({something: event.target.value})} 
     className="form-control" id="project_name"/> 
    </div> 

Answer 2

Der Code für Ihren Event-Handler ist nicht etwas, was ich sehr gut lesbar betrachten würde, DRY oder adhärenten ein bewährtes Verfahren reagieren.

Die Verwendung einer anonymen Pfeilfunktion und das Aufrufen von setState von dort, wie es @vitaliy-andrianov getan hat, ist völlig in Ordnung. Es gibt nur einen Nachteil mit den Pfeilfunktionen in diesem Fall: Die Funktionen werden bei jedem erneuten Rendern neu erstellt, was zu einer kleinen (wahrscheinlich vernachlässigbaren) Leistungseinbuße führt. Es könnte auch etwas trockener sein. Unten ist eine andere akzeptable Alternative:

// Component class method 
handleFormChange(event) { 
    this.setState({ 
    [event.currentTarget.name]: event.currentTarget.value 
    }); 
} 

// ... and if you like destructuring 
handleFormChange({currentTarget: {name, value}}) { 
    this.setState({ [name]: value }); 
} 


// An example input 
<input 
    className="form-control" 
    name="proyectName" 
    type="text" 
    value={this.state.proyectName} 
    onChange={this.handleFormChange} /> 

Hinweis: ich handleFormChange direkt an die onChange prop bin vorbei; Damit dies funktioniert, muss die Funktion an den Umfang der Klasse gebunden sein. Stellen Sie also sicher, dass Sie das im Konstruktor tun (this.handleFormChange.bind(this)), oder verwenden Sie einfach eine Pfeilfunktion.