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

React 2年前 28

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

将输入字段的值存储在状态变量中。
在表单元素上设置 onSubmit 属性。
在我们的 handleSubmit 函数中访问输入字段的值。

import {useState} from 'react';

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

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // ?️ 防止页面刷新

    // ?️ 获取输入值
    console.log('firstName ?️', firstName);
    console.log('lastName ?️', lastName);

    // ?️ 清空表单中的input值
    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;

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

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

我们在字段上设置了 onChange 属性，因此当它们的值发生变化时，我们会更新相应的状态变量。

表单中的按钮元素具有提交类型，因此每次单击它时，都会在表单上触发提交事件。

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

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

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

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

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

在每个输入字段上设置 ref 属性
在表单元素上设置 onSubmit 属性。
访问 ref 对象上的输入值，例如 ref.current.value。

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

    // ?️ 获取输入值
    console.log('first ?️', firstRef.current.value);
    console.log('last ?️', lastRef.current.value);

    // ?️ 清空表单中的input值
    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;

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

上面的示例使用不受控制的输入字段。请注意，输入字段没有 onChange 属性或值集。

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

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

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

注意 ，我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的输入元素。

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

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

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

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

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

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

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

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

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

const App = () => {
  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // ?️ 使用 name 属性访问输入值
    console.log('first ?️', event.target.first_name.value);
    console.log('second ?️', event.target.last_name.value);

    // ?️ 清除表单中的所有输入值
    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;