<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 处理form表单input输入项双向数据绑定
猜你喜欢
转载自qiaolevip.iteye.com/blog/2290371
今日推荐
周排行