七爪源码:如何在 React 中提交时获取表单输入的值

要在提交时获取表单输入的值：

1. 创建一个状态变量来存储输入的值。
2. 在输入上设置 onChange 事件处理程序以在输入值更改时更新状态变量。
3. 在表单元素上设置 onSubmit 事件处理程序。
4. 访问 onSubmit 事件处理程序中输入字段的值。

例如：

App.js

import { useState } from 'react';export default function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [message, setMessage] = useState('');  const handleSubmit = (event) => {
    event.preventDefault();    setMessage(`Hello ${firstName} ${lastName}!`);
    setFirstName('');
    setLastName('');
  };  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        value={firstName}
        placeholder="First Name"
        onChange={(event) =>
          setFirstName(event.target.value)
        }
      />      <br />
      <br />      <input
        type="text"
        id="lastName"
        name="lastName"
        value={lastName}
        placeholder="Last Name"
        onChange={(event) => {
          setLastName(event.target.value);
        }}
      />      <br />
      <br />      <button type="submit">Submit</button>      <br />
      <br />      <h2>{message}</h2>
    </form>
  );
}

使用 useState() 钩子，我们创建一个状态变量来存储每个输入字段的当前值。我们还创建了另一个状态变量（消息），它将在用户提交表单后使用输入字段的值进行更新。

我们在每个输入字段上设置一个内联 onChange 事件处理程序，以便在输入字段更改时调用处理程序。在每个处理程序中，我们使用处理程序接收的 Event 对象的 target 属性来访问输入元素对象。该对象的 value 属性包含输入值，因此我们将其传递给状态更新函数以更新该特定输入的值。

表单中的按钮元素有一个提交类型，所以每次用户点击它都会触发提交事件。我们在表单上设置了一个 onSubmit 事件处理程序来监听这个事件。在此处理程序中，我们在 Event 对象上调用 preventDefault()，以防止在提交表单时刷新页面。

要在提交表单后获取此事件处理程序中的输入值，我们只需访问 firstName 和 lastName 状态变量。

使用 event.target 获取表单提交的输入值

我们还可以使用 Event 对象的 target 属性在提交时获取表单输入的值。这在我们不使用状态变量（即不受控制的输入）跟踪输入值的情况下很有用。

App.js

import { useState } from 'react';export default function App() {
  const [message, setMessage] = useState('');  const handleSubmit = (event) => {
    event.preventDefault();    const firstName = event.target.firstName.value;
    const lastName = event.target.lastName.value;
    setMessage(`Hello ${firstName} ${lastName}!`);    event.target.reset();
  };  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        placeholder="First Name"
      />      <br />
      <br />      <input
        type="text"
        id="lastName"
        name="lastName"
        placeholder="Last Name"
      />      <br />
      <br />      <button type="submit">Submit</button>      <br />
      <br />      <h2>{message}</h2>
    </form>
  );
}

在 onSubmit 事件处理程序中，Event 对象的 target 属性返回表单元素对象（HTMLFormElement 类型）。

因为我们在 input 元素上设置了 name 属性，所以 form 元素对象会包含一个同名的属性来返回 input 元素对象，即在 input 元素上设置 name 为 firstName 后，我们可以访问这个元素对象 使用表单元素对象上的 firstName 属性输入。

在获取每个输入的值并显示消息后，我们在表单元素对象上调用 reset() 方法来恢复表单输入元素的默认值。 这就是我们在此示例中清除输入字段中的文本的方式，因为它们不受状态变量的控制。

使用 ref 获取表单提交的输入值

我们还可以使用组件 ref 来获取提交时不受控制的表单输入的值。

App.js

import { useState, useRef } from 'react';export default function App() {
  const [message, setMessage] = useState('');
  const firstNameRef = useRef(undefined);
  const lastNameRef = useRef(undefined);  const handleSubmit = (event) => {
    event.preventDefault();    const firstName = firstNameRef.current.value;
    const lastName = lastNameRef.current.value;    setMessage(`Hello ${firstName} ${lastName}!`);    event.target.reset();
  };  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        placeholder="First Name"
        ref={firstNameRef}
      />      <br />
      <br />      <input
        type="text"
        id="lastName"
        name="lastName"
        placeholder="Last Name"
        ref={lastNameRef}
      />      <br />
      <br />      <button type="submit">Submit</button>      <br />
      <br />      <h2>{message}</h2>
    </form>
  );
}

受控输入中的数据由 React 状态处理，但对于不受控输入，则由 DOM 本身处理。这就是为什么上面这个例子中的输入没有设置 value prop 或 onChange 事件处理程序。相反，我们使用 React ref 访问输入字段的值。当输入中的文本发生更改时，DOM 会更新此值。

对于每个输入，我们使用 useRef() 钩子创建一个 ref 对象，并将其设置为输入的 ref 属性。这样做会将 ref 对象的当前属性设置为表示输入元素的 DOM 对象。

useRef() 返回一个可变的 ref 对象，该对象在组件更新时不会改变值。此外，修改此对象当前属性的值不会导致重新渲染。这与从 useState() 返回的 setState 更新函数相反。

尽管 React 文档建议使用受控组件，但不受控组件提供了一些优势。如果表单非常简单并且不需要即时验证，并且只需要在提交表单时访问值，您可能更喜欢它们。

关注七爪网，获取更多APP/小程序/网站源码资源！