react学习-受控组件（controlled components）

一、问题背景
一般的html表单元素 对于访问用户输入的数据和表单提交的事件监听处理函数表现平平，而在React中的受控组件可以让这些表单的“天生不足”规避掉。
在React受控组件中，所有的html表单都具有统一的value属性，textarea也不例外。这让我们在处理用户输入数据有了极大便利。
示例代码：

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} /> //注意此处
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

二、处理多个表单
实际项目中，会有很多表单，而React中每个表单 的value是如何区分的？
答案是通过给各表单添加name属性来做区分，
示例代码：

class NameForm extends React.Component {
            constructor (props) {
                super(props);
                this.state = { //注意此处
                    text_value:'',
                    select_value:'请选择',
                }
                this.handleChange = this.handleChange.bind(this);
                this.handleSubmit = this.handleSubmit.bind(this);
            }
            handleChange (ev) {
                const name = ev.target.name;
                this.setState({
                    [name]:ev.target.value, //注意此处 [name]是es5的新语法：计算属性名
                })
            }
            handleSubmit (ev) {
                alert('A Name will be submitted'+ this.state.value );
                ev.preventDefault();
            }
            render () {
                return (
                    <form onSubmit={this.handleSubmit}>
                        <p>
                            <textarea name="content" type="text" value={this.state.text_value} onChange={this.handleChange}></textarea>  //注意此处
                        </p>
                        <p>
                            <input type="submit" value="提交" /> 
                        </p>
                        <h1>
                            {this.state.text_value}
                        </h1>
                        <p>
                            <select name="choice"  value={this.state.select_value} onChange={this.handleChange}> //注意此处
                                <option value="">请选择</option>
                                <option value="能量">能量</option>
                                <option value="血量">血量</option>
                                <option value="速度">速度</option>
                                <option value="力量">力量</option>
                                <option value="">空值</option>
                            </select>
                        </p>
                        <p>
                            你选择了{this.state.select_value}
                        </p>
                    </form>

                )
            }
        }
        ReactDOM.render(
            <NameForm />,
            document.getElementById('root')
        )