在 React 中获取表单提交的输入值

作者

在 React 中获取表单提交的输入值

Get input values on Form submit in React

在 React 中获取表单提交的输入值：

  1. 将输入字段的值存储在状态变量中。
  2. 在表单元素上设置onSubmit道具。
  3. 访问函数中输入字段的值handleSubmit。
应用程序.js
import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('firstName 👉️', firstName);
    console.log('lastName 👉️', lastName);

    // 👇️ clear all input values in the form
    setFirstName('');
    setLastName('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={event => setFirstName(event.target.value)}
          value={firstName}
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

提交时获取表单输入值

我们使用useState
钩子来跟踪输入字段的值。

我们onChange在字段上设置 prop，所以当它们的值改变时，我们更新相应的状态变量。

表单中的button元素的类型为submit，因此每次单击它时，都会submit在表单上触发事件。

我们使用函数中的event.preventDefault()方法来防止提交表单时页面刷新。 handleSubmit

要获取表单提交的输入值，我们只需访问状态变量。

如果您想在提交表单后清除字段的值，则可以将状态变量设置为空字符串。

或者，您可以使用不受控制的输入字段。

在 React 中获取表单提交的输入值：

  1. 在每个输入字段上设置ref道具
  2. 在表单元素上设置onSubmit道具。
  3. 访问 ref 对象的输入值，例如ref.current.value.
应用程序.js
import {useRef} from 'react';

const App = () => {
  const firstRef = useRef(null);
  const lastRef = useRef(null);

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('first 👉️', firstRef.current.value);
    console.log('last 👉️', lastRef.current.value);

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          ref={firstRef}
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          ref={lastRef}
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

在提交 ref 时获取表单输入值

上面的示例使用不受控制的输入字段。请注意，输入字段没有onChangeprop 或valueset。

您可以使用prop将初始值传递给不受控制的输入。但是，这不是必需的，如果您不想设置初始值，可以省略该道具。 defaultValue

当使用不受控制的输入字段时，我们使用
ref访问输入。

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的input元素。 ref

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

该useRef钩子创建了一个普通的 JavaScript 对象，但在每次渲染时都会为您提供相同的 ref 对象。换句话说，它几乎是一个带有.current属性的记忆对象值。

需要注意的是，当你更改currentref 的属性值时，不会导致重新渲染。

每次用户提交示例中的表单时，不受控制的输入值都会被记录下来。

您不应该value在不受控制的输入（没有onChange处理程序的输入字段）上设置 prop，因为这会使输入字段不可变并且您将无法输入。

reset()如果您想在提交表单后清除不受控制的输入的值，则可以使用该方法。

reset()
方法恢复表单元素的默认值。

无论您的表单有多少不受控制的输入字段，对该reset()方法的一次调用都会清除所有这些字段。

提交表单时获取输入字段值的另一种方法是使用其属性访问表单元素name。

应用程序.js
const App = () => {
  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // 👇️ access input values using name prop
    console.log('first 👉️', event.target.first_name.value);
    console.log('second 👉️', event.target.last_name.value);

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

在提交 ref 时获取表单输入值

提交表单时，我们使用nameprop 访问输入字段的值。

target对象上的属性event指的是form元素。

您不会经常看到这种方法，如果您不想在状态中存储输入字段的值或不使用 ref 对象，它主要是一种快速而肮脏的解决方案。

最常用的方法是将输入值存储在状态变量中。从任何地方访问状态变量的能力允许高度可定制的表单。

–

发表评论