首页 > 代码库 > React文档(十)表单
React文档(十)表单
HTML元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态。举个例子,这个普通的表单接受一个name值:
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="http://www.mamicode.com/Submit" />
</form>
这个表单具有默认的表单行为,当用户提交表单就会跳转到新页面。如果你想要在React里实现此行为,它自然而然就会实现。但是在大多数情况下,定义一个控制表单提交并且有能力控制用户输入的表单数据的js函数会更方便。实现这个的标准方法是一种叫“控制组件”的技术。
控制组件
在HTML里,<input>,<textarea>和<select>这类元素通常包含它们自己的状态并且会基于用户输入而更新状态。在React中,易变的状态通常会保存在组件的state属性里,并且只能使用setState()来更新。
我们可以联合两种状态通过设置React state为“单一数据源”。然后React组件会渲染表单也会控制随后用户的输入。这样子的表单元素输入的值被React控制的方法叫做“控制组件”。
举个例子,如果我们想要让上一个例子当提交的时候记录name值,我们可以把表单写成一个控制组件:
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ‘‘}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘A name was submitted: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value=http://www.mamicode.com/{this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="http://www.mamicode.com/Submit" /> </form> ); } }
在CodePen里试一试。
只要value属性被设置在表单元素上,被显示的value值就永远会是this.state.value,使得React的state是单一数据源。当每次修改表单值的时候handleChange就会更新React的state,只要输入改变显示的值就会更新。
通过控制组件,每一个state的变化都会有一个联合的处理函数。这让它可以明确的修改或者确认用户输入。举个例子,如果我们想要强制name值都用大写字母来写,那么我们应该像这样写handleChange函数:
handleChange(event) { this.setState({value: event.target.value.toUpperCase()}); }
React文档(十)表单