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

Question

我在这个组件中使用了 useRef，当我需要引用输入值时，它工作得很好，但是当我完成并单击提交按钮时，它工作得很好，但输入字段仍然有我编写的工作

简单地说，我需要在单击提交时清空输入字段，不使用 useState 和 Onchange 函数，因为它会导致渲染过多

useRef 有没有任何方法可以帮助我清空输入字段

这是代码

const AddTodoForm = () => {
  const inputRef = useRef()

  const createTodo = (e) => {
    e.preventDefault()
    const todoRef = fire.database().ref("Todo");
    const todo = {
      title: inputRef.current.value,
      complete: false
    };
    todoRef.push(todo)

    // I Need To Empty input value here

  }

  return (
    <form>
      <input type="text" ref={inputRef} />
      <button onClick={createTodo}> Add Todo </button>
    </form>
  )
}

Answer 1

提交待办事项后清除输入是这样的。

  const AddTodoForm = () => {
  const inputRef = useRef()

  const createTodo = (e) => {
    e.preventDefault()
    const todoRef = fire.database().ref("Todo");
    const todo = {
      title: inputRef.current.value,
      complete: false
    };
    todoRef.push(todo)
    inputRef.current.value = ""
  }

  return (
    <form>
      <input type="text" ref={inputRef} />
      <button onClick={createTodo}> Add Todo </button>
    </form>
  )
}