React.js 官方文档摘记：表单

表单

注意，被React渲染出来的DOM元素是不可变的。

如下面的例子：

function InputName(){
    return (
        <div>
            <input value='输入不可修改' />
        </div>
    );
}
ReactDOM.render(
    <InputName />,
    document.getElementById("root")
);

然后你就会发现，输入框的输入是没有办法进行改变的。

受控组件

相比上面的不可变，所谓的受控组件就是将输入的内容保存在state中，并设置相应的onChange、onClick事件等。

    class NameForm extends React.Component{
  constructor(props){
    super(props);
    this.state={value:"请输入名字"};
  }
  handleChange=()=>{
    this.setState({value:event.target.value});
  }
  render(){
    return (
      <input type={"text"} value={this.state.value} onChange={this.handleChange} />
    );
  }
}
ReactDOM.render(
  <NameForm />,
  document.getElementById("root")
);

上面我们把input的value保存在state中，并使用onChange事件修改state的值，间接修改input的value的值。

textarea 标签

一般设置textarea中的内容是使用这样的形式：

<textarea>
    这里就是textarea中的值。
</textarea>

在React中，需要使用value属性，就像操作一般input type='text'一样。

例子就是把上面的代码的input换成textarea。

select标签

HTML使用selected来确定选择的元素，并且该元素是设置在option中的。

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

但是在React中的中是这样的：

function SelectOption(props){
    constructor(props){
        super(props);
        this.state={value:'option1'}
    }
    handleChange=()=>{
        this.setState({value:event.target.value});
    }
    render(){
        return(
            <select value={this.state.value} onChange={this.handleChange}>
                <option value='option'>option</option>
                <option value='option1'>option1</option>
                <option value='option2'>option2</option>
            </select>
        );
    }
}

注意：value是设置在select中的，而且当下面的option中没有与value相匹配时，则返回第一个值。

多个输入的解决方案

上面我们针对每一个输入都编写了一个处理函数，但是当多个输入的处理函数是一致时，这么做显然是很麻烦，所以可以给他们设置统一的处理函数，再在这些函数中设置区分是哪个组件传递进来的，分别进行处理，如下面的形式：

function InputLst(props){
    constructor(props){
        super(props);
        this.state={
            input1:"",
            input2:""
        };
    }
    handleChange=()=>{
        var name=event.target.name;
        var value=event.target.value;
        this.setState({[name]:value});
    }
    render(){
        return(
            <div>
                <input name='input1' value={this.state.input1} onChange={this.handleChange} />
                <input name='input2' value={this.state.input2} onChange={this.handleChange} />
            </div>
        );
    }
}

上面两个input的处理函数是一样的onChange={this.handleChange}，再来再在handleChange中进行区分，该修改对应的哪个state中的值。

其中有一部分：{[name]:value}可能不是很清除，这样可能比较好理解一点：

var stateLst={};
stateLst[name]=value;
this.setState(stateLst);