React Forms
Forms是任何现代Web应用程序不可或缺的一部分。它允许用户与应用程序交互以及从用户那里收集信息。表单可以执行许多任务，这些任务取决于您的业务需求和逻辑的性质，例如用户身份验证，添加用户，搜索，过滤，预订，订购等。表单可以包含文本字段，按钮，复选框，单选按钮，
创建表单
React提供了一种有状态的，React性的方法来构建表单。组件而不是DOM通常处理React表单。在React中，表单通常是通过使用受控组件来实现的。
React中主要有两种类型的表单输入。
不受控制的组件
受控组件
不受控制的组件
不受控制的输入类似于传统的HTML表单输入。 DOM本身处理表单数据。在这里，HTML元素保持其自己的状态，当输入值更改时，这些状态将更新。要编写不受控制的组件，您需要使用ref从DOM获取表单值。换句话说，不需要为每个状态更新编写事件处理程序。您可以使用ref来从DOM访问表单的输入字段值。
示例
在此示例中，代码接受
<不受控制的组件中的strong>
用户名和公司名称。
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('You have entered the UserName and CompanyName successfully.');
event.preventDefault();
}
render() {
return (
<form onSubmit={this.updateSubmit}>
<h1>Uncontrolled Form Example</h1>
<label>Name:
<input type="text" ref={this.input} />
</label>
<label>
CompanyName:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;
输出
执行上面的代码，您将看到以下屏幕。
在字段中填写数据后，您会获得在以下屏幕上可以看到的消息。
受控组件
在HTML中，表单元素通常会保持自己的状态并根据用户输入对其进行更新。在受控组件中，输入表单元素由组件而不是DOM处理。此处，可变状态保留在state属性中，并且仅使用 setState()方法进行更新。
受控组件具有控制在每个 onChange事件，而不是仅一次获取数据(例如，当您单击提交按钮时)。然后，将这些数据保存到状态并使用setState()方法进行更新。这样使组件可以更好地控制表单元素和数据。
受控组件通过 props 获取其当前值，并通过回调通知更改。一个onChange事件。父组件通过处理回调并管理自己的状态，然后将新值作为Props传递给受控组件，从而"控制"此更改。也称为"哑组件"。
示例
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('You have submitted the input successfully: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1>Controlled Form Example</h1>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</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 = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<h1>Multiple Input Controlled Form Example</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={this.state.numberOfPersons}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
export default App;
输出
