React 表单

2025年3月17日 | 阅读 3 分钟

表单是任何现代 Web 应用程序不可或缺的一部分。它允许用户与应用程序交互，并从用户那里收集信息。表单可以执行许多任务，具体取决于您的业务需求和逻辑的性质，例如用户身份验证、添加用户、搜索、过滤、预订、订购等。表单可以包含文本字段、按钮、复选框、单选按钮等。

创建表单

React 提供了一种有状态的、响应式的表单构建方法。组件而不是 DOM 通常处理 React 表单。在 React 中，表单通常通过使用受控组件来实现。

React 中主要有两种类型的表单输入。

非受控组件
受控组件

非受控组件

非受控输入类似于传统的 HTML 表单输入。 DOM 本身处理表单数据。在这里，HTML 元素维护自己的状态，该状态将在输入值更改时更新。要编写非受控组件，您需要使用 ref 从 DOM 获取表单值。换句话说，无需为每次状态更新编写事件处理程序。您可以使用 ref 从 DOM 访问表单的输入字段值。

示例

在此示例中，代码在非受控组件中接受一个字段username和company name。

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 event 上传递到其中的函数，而不是仅获取一次数据，例如，当您单击提交按钮时。然后将此数据保存到状态并使用 setState() 方法更新。这使得组件可以更好地控制表单元素和数据。

受控组件通过 props 获取其当前值，并通过像 onChange 事件这样的 callbacks 通知更改。父组件通过处理回调并管理其自身的状态，然后将新值作为 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;

输出

下一主题React 受控组件 Vs 非受控组件

React 表单

创建表单

非受控组件

受控组件

在受控组件中处理多个输入

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 表单

创建表单

非受控组件

受控组件

在受控组件中处理多个输入

示例

相关帖子

React Redux 示例

React 组件

React 组件 API

React 列表

React Bootstrap

React 上下文

React 版本

React Props

React 键

React Props 验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器