分享React表单提交获取值的方式

发表于 分类于 阅读次数：

很奇怪的，这个是要去自己发现的，我也是在摸索中发现的，其实React的使用，只有你发现了，才觉得好玩，最近的Reflux就是这样子的。

##表单提交部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
handleSubmit:function(e){
  e.preventDefault();
  var params = {};
  var keys = React.findDOMNode(this.refs.keys).value.trim();
  var days = React.findDOMNode(this.refs.days).value.trim();
  var num = React.findDOMNode(this.refs.num).value.trim();
  var startDate = React.findDOMNode(this.refs.from_date).value.trim();
  var endDate = React.findDOMNode(this.refs.to_date).value.trim();
  //这部分是我自己发现的，哈哈
  var regStyle =  $('.regStyle')[0].value;
  var userTerminal =  $('.userTerminal')[0].value;
  params['keys'] = keys;
  params['regstyle'] = regStyle;
  params['terminal'] = userTerminal;
  params['days'] = days;
  params['num'] = num;
  params['startDate'] = startDate;
  params['endDate'] = endDate;
  this.props.searchHandle(keys,params);
  return false;
},

##Render部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
render:function(){
  return (
    <form onSubmit={this.handleSubmit} className='form-inline'>
      <div className="row" style={{'marginBottom':'10px'}}>
        <div className="col-md-2">
          <select refs="type" className='form-control input type' data-style="btn-default" title='任务类型'>
            <option value=''>所有</option>
            <option value='exportUserData'>账单导出</option>
            <option value='repairDefaultData'>修复数据</option>
            <option value='updateUserExtendData'>用户数据统计</option>
            <option value='mockerImportMail'>模拟登录导入账单</option>
            <option value='protocolImportMail'>协议登录导入账单</option>
            <option value='mockerFundImport'>公积金查询账单</option>
            <option value='mockerCOImport'>话费查询账单</option>
            <option value='mockerOnlineShopImport'>网络平台导入账单</option>
            <option value='sendPassword'>发送密码</option>
          </select>
        </div>
        <div className="col-md-2">
          <select refs="status" className='form-control input status' data-style="btn-default" title='任务状态'>
            <option value=''>所有</option>
            <option value='200'>执行中</option>
            <option value='100'>等待执行</option>
            <option value='900'>执行成功</option>
          </select>
        </div>
        <div className="col-md-2">
          <input type='submit' className="btn btn-primary btn-block" value="搜索" />
        </div>
      </div>
    </form>
  );
}

如果这个时候你使用select的话，什么onChange会在某种情况是不好用的，我的这个就是针对这种情况的，

因为我还使用了selectpicker这个bootstrap插件库”bootstrap-select”，感兴趣的可以去看看