React 表单

就像在 HTML 中一样，React 使用表单允许用户与网页交互。

React 中添加表单

您可以添加一个与任何其他元素一样使用 React 的表单:

实例:

添加允许用户输入其姓名的表单:

import React from 'react';
import ReactDOM from 'react-dom';
function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

这将正常工作，表单将提交，页面将刷新。

但这通常不是我们希望在 React 中发生的事情。

我们希望防止这种默认行为，并让 React 控制表单。

处理表格

处理表单是关于当数据更改值或被提交时如何处理数据。

在 HTML 中，表单数据通常由 DOM 处理。

在 React 中，表单数据通常由组件处理。

当数据由组件处理时，所有数据都存储在组件状态中。

可以通过在 onChange 属性中添加事件处理程序来控制更改。

我们可以使用 useState 钩子跟踪每个输入值，并为整个应用程序提供 "单一真实来源"。

查看 React Hooks ，学习更多的钩子知识。

实例:

使用 onChange 钩子管理输入框:

import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
  const [name, setName] = useState("");
  return (
    <form>
      <label>Enter your name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

提交表单

您可以通过在 <form> 的 onSubmit 属性中添加事件处理程序来控制提交操作:

实例:

在 onSubmit 属性中添加提交按钮和事件处理程序:

import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
  const [name, setName] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('The name you entered was: ${name}');
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

多个输入字段

您可以通过向每个元素添加名称属性，控制多个输入字段的值。

我们将用一个空对象初始化我们的状态。

要访问事件处理程序中的字段，请使用 event.target.name 和 event.target.value 语法。

实例:

编写一个包含两个输入字段的表单:

import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
  const [inputs, setInputs] = useState({});
  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputs);
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input
        type="text"
        name="username"
        value={inputs.username || ""}
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input
          type="number"
          name="age"
          value={inputs.age || ""}
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Textarea

React 中的 textarea 元素与普通 HTML 略有不同。在 HTML 中，textarea 的值是开始标记<textarea> 和结束标记 </textarea> 之间的文本。

<textarea>  Content of the textarea.</textarea>

在 React 中，textarea 的值放置在 value 属性中。我们将使用 useState 钩子管理textarea 的值：:

实例:

包含一些内容的简单文本区域:

import React from 'react';
import ReactDOM from 'react-dom';
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      description: 'The content of a textarea goes in the value attribute'
    };
  }
  render() {
    return (
      <form>
      <textarea value={this.state.description} />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Select

React 中的下拉列表或选择框与 HTML 也有点不同。

在 HTML 中，下拉列表中的选定值是用 selected 选定的属性定义的:

HTML:

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

在 React 中，所选值由 select 标记上的 value 属性定义:

实例:

一个简单的选择框，其中选择的值 "Volvo" 在构造函数中初始化:

import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");
  const handleChange = (event) => {
    setMyCar(event.target.value)
  }
  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

通过对 <textarea> 和 <select> 进行这些细微的更改，React 能够以相同的方式处理所有输入元素。