React表单form用法 – ReactJS实战教程 react表单|React

上一章ReactJS实战教程请查看：React受控组件和非受控组件之间的区别
表单是任何现代web应用程序的组成部分，它允许用户与应用程序交互，并从用户收集信息。表单可以执行许多任务，这些任务取决于你的业务需求和逻辑的性质，如用户身份验证、添加用户、搜索、过滤、预订、订购等。表单可以包含文本字段、按钮、复选框、单选按钮等。
创建表单React提供了一种有状态的、反应性的表单构建方法。通常是组件而不是DOM处理React表单。在React中，表单通常由受控组件实现。
React中主要有两种类型的表单输入。

非受控组件
受控组件

非受控组件
非受控输入类似于传统的HTML表单输入，DOM本身处理表单数据。在这里，HTML元素维护自己的状态，这些状态将在输入值更改时更新。要编写非受控组件，需要使用ref从DOM获取表单值。换句话说，不需要为每个状态更新编写事件处理程序，可以使用ref从DOM访问表单的输入字段值。
例子
在本例中，代码接受非受控组件中的字段用户名和公司名。

import React, { Component } from 'react'; class App extends React.Component { constructor(props) { super(props); this.updateSubmit = this.updateSubmit.bind(this); this.input = React.createRef(); } updateSubmit(event) { alert('已经成功地输入了用户名和公司名.'); event.preventDefault(); } render() { return ( < form onSubmit={this.updateSubmit}> < h1>非受控表单例子< /h1> < label>Name: < input type="text" ref={this.input} /> < /label> < label> CompanyName: < input type="text" ref={this.input} /> < /label> < input type="submit" value="http://www.srcmini.com/提交" /> < /form> ); } } export default App;

受控组件在HTML中，表单元素通常维护自己的状态，并根据用户输入进行更新。在受控组件中，输入表单元素由组件而不是DOM处理。在这里，可变状态保存在state属性中，仅使用setState()方法更新。
【React表单form用法 – ReactJS实战教程】受控组件具有控制在每个onChange事件上传递给它们的数据的函数，而不是只抓取一次数据，例如，当你单击submit按钮时。然后将该数据保存为state并使用setState()方法进行更新。这使得组件可以更好地控制表单元素和数据。
受控组件通过道具获取当前值，并通过回调(如onChange事件)通知更改。父组件通过处理回调和管理自己的状态来“控制”这种变化，然后将新值作为道具传递给受控组件，它也被称为“哑组件”。
例子

import React, { Component } from 'react'; class App 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('已经成功提交了输入: ' + this.state.value); event.preventDefault(); } render() { return ( < form onSubmit={this.handleSubmit}> < h1>受控表单例子< /h1> < label> Name: < input type="text" value=http://www.srcmini.com/{this.state.value} onChange={this.handleChange} /> < /label> < input type="submit" value="http://www.srcmini.com/提交" /> < /form> ); } } export default App;

处理受控组件中的多个输入如果希望处理多个受控输入元素，请向每个元素添加name属性，然后处理程序函数根据event.target.name的值决定如何处理。
例子

import React, { Component } from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { personGoing: true, numberOfPersons: 5 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = http://www.srcmini.com/target.type ==='checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( < form> < h1>多输入控制表单示例< /h1> < label> Is Person going: < input name="personGoing" type="checkbox" checked={this.state.personGoing} onChange={this.handleInputChange} /> < /label> < br /> < label> Number of persons: < input name="numberOfPersons" type="number" value=http://www.srcmini.com/{this.state.numberOfPersons} onChange={this.handleInputChange} /> < /label> < /form> ); } } export default App;