React学习之旅----表单录入

import React, { Component } from 'react';
/*

约束性和非约束性组件:
      非约束性组:<input type="text" defaultValue="a" />   这个 defaultValue 其实就是原生DOM中的 value 属性。      
      这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。
      约束性组件：<input value={this.state.username} type="text" onChange={this.handleUsername}  /> 
      这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。      
      这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双休数据绑定         

*/
class ReactForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'react表单',
      name: '',
      sex: '1',
      city: '',
      citys: [
        '北京', '上海', '深圳'
      ],
      hobby: [
        {
          'title': "睡觉",
          'checked': true
        },
        {
          'title': "吃饭",
          'checked': false
        },
        {
          'title': "敲代码",
          'checked': true
        }
      ],
      info: ''
    };
  }
  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.name, this.state.sex, this.state.city, this.state.hobby, this.state.info);
  }
  handleName = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  handleSex = (e) => {
    this.setState({
      sex: e.target.value
    })
  }
  handleCity = (e) => {
    this.setState({
      city: e.target.value
    })
  }
  handleHobby = (key) => {
    var hobby = this.state.hobby
    hobby[key].checked = !hobby[key].checked
    this.setState({
      hobby: hobby
    })
  }
  handleInfo = (e) => {
    this.setState({
      info: e.target.value
    })
  }
  render () {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <form onSubmit={this.handleSubmit}>
          用户名<input type='text' value={this.state.name} onChange={this.handleName} />
          <br />
          性别 男<input type='radio' value='1' checked={this.state.sex === '1'} onChange={this.handleSex} />
          女<input type='radio' value='2' checked={this.state.sex === '2'} onChange={this.handleSex} />
          <br />
          居住城市
          <select value={this.state.city} onChange={this.handleCity}>
            {
              this.state.citys.map(function (value, key) {
                return (
                  <option key={key}>{value}</option>
                )
              })
            }
          </select>
          <br />
          爱好
            {
            this.state.hobby.map((value, key) => {
              return (
                <span key={key}>
                  <input type='checkbox' checked={value.checked} onChange={this.handleHobby.bind(this, key)} />{value.title}
                </span>
              )
            })
          }
          <br />
          备注：<textarea vlaue={this.state.info} onChange={this.handleInfo} />
          <input type='submit' value='提交' />
        </form>
      </div>
    );
  }
}

export default ReactForm;