当前位置:首页 > 开发 > 软件应用 > 正文

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

发表于: 2016-04-12   作者:qiaolevip   来源:转载   浏览:
摘要: 选择版块 { Object.keys(modules).map((key)=>( modules[key].map((item)=>( {item.name} )) )) } //双向数据绑定核心 setStateByKey(k,e){ letnewForm=this.state.form; newForm[k]=e
 <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输入项双向数据绑定

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号