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，或者是对任何反应最佳实践的依从性。

使用匿名箭头函数并从那里调用setState，就像@ vitaliy-andrianov所做的那样，完全没问题。在这种情况下，箭头函数只有一个缺点：在每次重新渲染时都会重新创建函数，从而导致一个小的（很可能是可忽略的）性能损失。它也可能更干一点。以下是另一个可接受的替代方案：

// 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)）中执行此操作，或者只使用箭头函数。

使用双向绑定设置react.js中的状态

2 个答案: