点击提交按钮时，如何使用useRef Hook清空多个输入框？

当然可以用useRef来清空输入框，但你当前的代码里把useRef用来存储输入值的对象了，这没法直接操作DOM清空输入框。要实现单个useRef控制多个输入框并清空，得让useRef存储每个输入框的DOM节点引用，具体改法如下：

步骤1：调整useRef的用途 #

把原来存输入值的ref改成存储DOM节点的对象：

const inputRefs = useRef({});

步骤2：给每个输入框绑定回调ref #

给每个input添加ref属性，用回调函数把DOM节点存入inputRefs.current对应的键（和输入框的name对应）：

<input
  type="text"
  name="email"
  onChange={onChange}
  ref={(el) => inputRefs.current.email = el}
/>
<input
  type="password"
  name="password"
  onChange={onChange}
  ref={(el) => inputRefs.current.password = el}
/>

步骤3：在提交函数里清空输入框 #

遍历inputRefs.current里的所有DOM节点，把它们的value设为空字符串：

const handleSignUpClick = () => {
  // 遍历所有输入框DOM节点并清空
  Object.values(inputRefs.current).forEach(input => {
    if (input) input.value = "";
  });
};

完整修改后的代码 #

import { useRef } from 'react';

function SignUp() {
  const inputRefs = useRef({});

  const onChange = (e) => {
    // 如果你还是需要用ref存输入值，可以单独再声明一个ref，或者更推荐用useState管理表单状态
    // 比如：const [formData, setFormData] = useState({ email: '', password: '' });
  };

  const handleSignUpClick = () => {
    // 清空所有输入框
    Object.values(inputRefs.current).forEach(input => {
      if (input) input.value = "";
    });
  };

  return (
      <form onSubmit={(e) => e.preventDefault()}>
        <input
          type="text"
          name="email"
          onChange={onChange}
          ref={(el) => inputRefs.current.email = el}
        />
        <input
          type="password"
          name="password"
          onChange={onChange}
          ref={(el) => inputRefs.current.password = el}
        />

        <button onClick={handleSignUpClick}>
          Sign up
        </button>
      </form>
  );
}

export default SignUp;

额外提示 #

其实在React里，更推荐用useState来管理表单输入状态，清空的时候直接重置状态即可（比如setFormData({ email: '', password: '' })），这样更符合React的状态管理逻辑。但如果你确实需要用useRef直接操作DOM清空，上面的方法完全可行。

内容的提问来源于stack exchange，提问作者helloworld