迹忆客 专注技术分享

要在 React 中清除输入字段的值：

1. 将输入的值存储在状态变量中。
2. 当某个事件发生时，将状态变量设置为空字符串。
3. 对于不受控制的组件，将 ref 的值设置为空字符串，例如 ref.current.value = '';。

import {useState} from 'react';

const App = () => {
  // 👇️ 将输入的值存储在状态中
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  const handleClick = () => {
    // 👇️ 清除 input 值
    setMessage('');
  };

  return (
    <div>
      <input
        id="message"
        name="message"
        type="text"
        onChange={handleChange}
        value={message}
      />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

export default App;

我们使用 useState 钩子将输入字段的值存储在状态变量中。

要清除输入的值，我们必须将消息状态变量设置为空字符串。

每次单击按钮时，都会调用我们传递给按钮元素的 onClick 属性的 handleClick 函数。

该按钮可以是表单的提交按钮，也可以是触发事件的简单按钮。

这种方法可用于根据需要重置尽可能多的输入字段的值。

如果我们通过 useRef 钩子使用不受控制的组件，请将 ref 的值设置为空字符串。

import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ 清除 input 字段值
    ref.current.value = '';
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" type="text" />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

此代码示例实现了相同的结果，但对于不受控制的组件。

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

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

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

这种方法可用于根据需要清除尽可能多的不受控制的输入字段的值。

或者，在使用不受控制的输入字段时，我们还可以使用 reset() 方法清除表单中所有输入字段的值。

import {useRef} from 'react';

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

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

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

注意 ，这种方法不适用于我们将输入字段的值存储在状态中的受控组件。

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

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

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