当前位置:首页 > 开发 > 行业应用 > 正文

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

    震惊

    震惊

编辑推荐
  潜水多年、一直是只看不评不写多年,每每看到各位大牛分享的经典文章都是默默的收藏,对大牛技
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款
linux内核提供了一个Input子系统来实现的,Input子系统会在/dev/input/路径下创建我们硬件输入设备
系列 1. ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ] 2. ExtJs 备忘录(2)—— Form表单(
转载请注明出处: http://blog.csdn.net/liu470368500/article/details/49646683 前段时间,写过一
linux内核提供了一个Input子系统来实现的,Input子系统会在/dev/input/路径下创建我们硬件输入设备
linux内核提供了一个Input子系统来实现的,Input子系统会在/dev/input/路径下创建我们硬件输入设备
linux内核提供了一个Input子系统来实现的,Input子系统会在/dev/input/路径下创建我们硬件输入设备
  jQuery.my 这个插件用于实时双向数据绑定。它发生变异给出的数据源对象,反映了用户与用户界面
一、传统方式存取数据react实现: <div key="123" parent={this} viewdState={StateCode.MainBox
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号
a input8v>