在 React.js 中使用表单
react jsjavascriptfront end technology
在简单的 html 表单中，表单元素在内部保留值并在表单提交按钮上提交。
示例
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
在上面的例子中，我们有一个名为 username 的简单输入，我们可以在表单提交时接收它的值。html 表单的默认行为是导航到新页面，即表单提交页面。
但如果我们有一个表单提交处理程序 JavaScript 函数，它可以提供更多优势，该函数也可以验证表单数据。验证将向用户提供相关反馈。
React 有一种处理表单提交的技术，称为受控组件。
与 html 一样，input、textarea 等元素保持自己的状态并根据用户操作进行更新。在 React 中，可变字段与状态对象一起保存。
在 React 的受控组件方法中处理用户名字段 −
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
这里我们有 onChange 处理函数来更新状态字段用户名。
在 formSubmit 上，我们只是在浏览器中显示控制台日志以显示提交的用户名。
其他受控类型的组件是文本区域、选择标签、单选按钮等。
还有一些不受控的组件，例如文件类型，它们本质上是只读的，并且仅在表单提交时获取其值。
使用单个 JS 函数处理多个表单输入 −
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}
应通过使用状态初始化为字段提供默认值来避免字段的受控输入为空值。
对于 React 中表单处理的全面解决方案，可以使用 formik 等第三方库来完成。使用验证、向用户反馈等都很简单。
