数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 React.js 中使用表单
在简单的 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 受控组件方法处理 username 字段 -
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 处理程序函数，用于更新状态字段 username。
在 formSubmit 中，我们只是在浏览器中显示控制台日志以显示提交的用户姓名。
其他受控类型的组件包括 textarea、select 标签、单选按钮等。
也有一些不受控的组件，例如文件类型，它们本质上是只读的，并且仅在表单提交时获取其值。
使用单个 JS 函数处理多个表单输入 -
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
}应避免使用空值的受控输入字段，可以通过使用状态初始化为字段提供默认值来避免。
对于 React 中表单处理的完整解决方案，可以使用像 formik 这样的第三方库。它易于使用验证、向用户提供反馈等等。
更新于: 2019年8月28日
312 次浏览
广告