react 表单信息处理提交

最近一直在看react，项目中一直用的是vue突然发现vue之所以火得那么快是有原因的，双向数据绑定，语法简洁通俗易懂，感觉有一定经验的开发就可以直接看文档上手，react 的jsx适合资深开发，很灵活，但是好多东西都要自己去实现，总之都各自有自己的优缺点吧。

运行效果如下：

 

import React, { Component } from 'react';
import './form.css';
import style from './style.js';
export default class Form extends Component {
  constructor () {
    super();
    this.state = {
      value01: '',
      value02: '',
      value03: [],
      value04: '',
      value05: '',
      value06: '',
      value07: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  submit () {
    let event = event || window.event;
    console.log('=====提交的表单信息=====');
    console.log(this.state);
    console.log('=====提交的表单信息=====');
    event.preventDefault();
  }
  // 实现表单输入同步state数据信息
  handleChange (event) {
    let name = event.target.name;
    let val = event.target.dataset.val ? event.target.dataset.val : event.target.value; // 判断是radio类或者checkbox类型
    if (name === 'value03') {
      let arr = [...this.state.value03];
      let index = arr.findIndex(value => value === val);
      if (index > -1) {
        arr.splice(index, 1);
      } else {
        arr.push(val);
      }
      this.setState({
        [name]: [...new Set(arr)]
      });
    }
    this.setState({
      [name]: val
    });
  }
  render () {
    return (
      <div className="form">
        <form name="form">
          <div style={style.result}>{JSON.stringify(this.state)}</div>
          <div style={style.item}>
            <span style={style.itemLabel}>用户名：</span>
            <input type="text" value={this.state.value01} onChange={this.handleChange} name="value01"/>
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>密码：</span>
            <input type="password" value={this.state.value02} onChange={this.handleChange} name="value02"/>
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>兴趣爱好：</span>
            <input type="checkbox" name="value03" value={this.state.value03} data-val="1" onClick={this.handleChange} />兴趣1
            <input type="checkbox" name="value03" value={this.state.value03} data-val="2" onClick={this.handleChange}/>兴趣2
            <input type="checkbox" name="value03" value={this.state.value03} data-val="3" onClick={this.handleChange}/>兴趣2
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>性别：</span>
            <input type="radio" name="value04" value={this.state.value04} data-val="man" onClick={this.handleChange}/>男
            <input type="radio" name="value04" value={this.state.value04} data-val="wommen" onClick={this.handleChange}/>女
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>学校:</span>
            <select value={this.state.value05} onChange={this.handleChange} name="value05">
              <option value="1">学校1</option>
              <option value="2">学校2</option>
              <option value="3">学校3</option>
              <option value="4">学校4</option>
            </select>
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>资料：</span>
            <input type="file" value={this.state.value06} onChange={this.handleChange} name="value06"/>
          </div>
          <div style={style.item}>
            <span style={style.itemLabel}>备注：</span>
            <textarea value={this.state.value07} onChange={this.handleChange} name="value07"></textarea>
          </div>
          <div style={style.item}>
            <input type="submit" value="提交表单" onClick={this.submit.bind(this)}/>
          </div>
        </form>
      </div>
    );
  }
}

样式：

const style = {
  result: {
    backgroundColor: '#ccc',
    fontSize: '16px',
    color: '#333',
    height: '100px',
    width: '900px',
    textAlign: 'center',
    border: '1px solid red',
    margin: '0 auto'
  },
  item: {
    width: '600px',
    margin: '0 auto',
    height: '40px',
    lineHeight: '40px',
    textAlign: 'left',
    color: '#333',
    fontSize: '14px'
  },
  itemLabel: {
    display: 'inline-block',
    width: '80px',
    height: '40px',
    lineHeight: '40px'
  }
};

export default style;