javascript - 我可以使用 useRef 钩子(Hook)来清空输入值吗？

Question

点击提交按钮时我需要清空输入字段

我想知道当控制多个useRefs作为一个整体时如何清空输入

像inputRef.current.value = ""

这是代码

function SignUp() {
  const ref = useRef();

  const onChange = (e) => {
    ref.current = { ...ref.current, [e.target.name]: e.target.value };
  };

  const handleSignUpClick = () => {
    // I Need To Empty input value here
  };

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

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

export default SignUp;

Answer 1

更好的方法是使用 useState。

function SignUp() {
  const ref = useRef();

  const onChange = (e) => {
    ref.current = { ...ref.current, [e.target.name]: e.target.value };
  };

  const handleSignUpClick = (e) => {
    e.preventDefault();
    // I Need To Empty input value here
    e.target.reset();
  };

  return (
      <form onSubmit={handleSignUpClick}>
      <input type="text" name="email" onChange={onChange} />
      <input type="password" name="password" onChange={onChange} />

      <button>Sign up</button>
    </form>
  
  );
}

export default SignUp;