通過雙向綁定在react.js中設置狀態

Question

我正在使用react.js和fire-base的項目中工作，當我將輸入設置為以fire-base的數據填充的狀態時，我有一個表單，並且正在工作，我可以更新和創建新注冊表，但是我認為輸入的onChangeHandle()不是正確的方法。

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>
        )
    }

這是我的事件處理程序：

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

我認為您應該做這樣的事情。

  <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

我認為事件處理程序的代碼不是易讀， DRY或遵循任何最佳實踐的代碼。

像@ vitaliy-andrianov一樣，使用匿名箭頭函數並從那里調用setState完全可以。 在這種情況下，箭頭功能只有一個缺點：在每次重新渲染時都會重新創建功能，這會導致很小的性能損失（很可能忽略不計）。 也可能會更干燥。 以下是另一種可接受的替代方法：

// 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} />

注意：我將handleFormChange直接傳遞給onChange道具； 為此，功能必須綁定到類的范圍。 因此，請確保您在構造函數（ this.handleFormChange.bind(this) ）中執行this.handleFormChange.bind(this) ，或者僅使用箭頭函數。