React 处理form表单input输入项双向数据绑定

 <form method="post" autoComplete="off" encType="multipart/form-data" onSubmit={this.onSubmit.bind(this)}>
    <div className={ 'title bl-line' + (state.activeInput == 'subject' ? ' active' : '') }>
      <input type="text" placeholder="标题" value={ state.form.subject } onChange={ this.setStateByKey.bind(this, 'subject') } onFocus={ this.setActiveInput.bind(this, 'subject') } onBlur={ this.setActiveInput.bind(this, '') } />
    </div>
    <div className={ 'subject bl-line' + (state.activeInput == 'message' ? ' active' : '') }>
      <textarea placeholder="内容" value={ state.form.message } onChange={ this.setStateByKey.bind(this, 'message') } onFocus={ this.setActiveInput.bind(this, 'message') } onBlur={ this.setActiveInput.bind(this, '') } />
    </div>
    <div className={ 'module bl-line' + (state.activeInput == 'fid' ? ' active' : '') }>
      <select value={ state.form.fid } onChange={ this.setStateByKey.bind(this, 'fid') } onFocus={ this.setActiveInput.bind(this, 'fid') } onBlur={ this.setActiveInput.bind(this, '') }>
        <option value="0">选择版块</option>
        {
          Object.keys(modules).map((key) => (
            modules[key].map((item) => (
              <option key={item.fid} value={item.fid}>{item.name}</option>
            ))
          ))
        }
      </select>
    </div>
 </form>



// 双向数据绑定核心
setStateByKey(k, e) {
  let newForm = this.state.form;
  newForm[k] = e.target.value;
  this.setState({
    form: newForm
  });
}

 

有疑问或技术交流，扫描公众号一起讨论学习。

更多React在线学习访问：http://each.sinaapp.com/react/index.html

更多实例应用扫码体验：