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);