在前面的课程中，我们介绍了在React中如何处理表单。通过截获控件onChange方法，从而将value控制于组件中的模式叫做Controlled Component。
ControlledComponent的一个特点是代码量大，较为麻烦。在React中，还有另一种处理表彰的模式，叫UncontrolledComponent。
前一节中我们介绍了React中一个非常重要的特性：Ref函数。利用Ref函数，可以帮助我们实现UnControlled Component。
UnControlled Component不截获控件的值，而是通过Ref函数，获取到控件DOM，每次取值时直接从DOM中取。
通过下面的例子来了解一下：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value); // 根据DOM获取value
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} /> // 使用ref函数记录下DOM
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
使用Uncontrolled Component 模式下，可以使用defaultValue来给控件设置初始值：
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
defaultValue="Bob" // 使用defautValue设置初始值
type="text"
ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
如何优化React性能？
好，这一节就到这里。现这里，你已经达到React中级水平，后续我将介绍更多React高级技术。
想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。
