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