可以使用 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

提交待办事项后清空输入即可。&nbsp; const AddTodoForm = () => {&nbsp; const inputRef = useRef()&nbsp; const createTodo = (e) => {&nbsp; &nbsp; e.preventDefault()&nbsp; &nbsp; const todoRef = fire.database().ref("Todo");&nbsp; &nbsp; const todo = {&nbsp; &nbsp; &nbsp; title: inputRef.current.value,&nbsp; &nbsp; &nbsp; complete: false&nbsp; &nbsp; };&nbsp; &nbsp; todoRef.push(todo)&nbsp; &nbsp; inputRef.current.value = ""&nbsp; }&nbsp; return (&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; <input type="text" ref={inputRef} />&nbsp; &nbsp; &nbsp; <button onClick={createTodo}> Add Todo </button>&nbsp; &nbsp; </form>&nbsp; )}

Answer 2

只需在 rer 中获取当前 DOM 并设置值“”( inputRef.current.value = "";)。例子：import React, { useRef, useState } from "react";export default function DisableElevation() {&nbsp; const [todos, setTodos] = useState([]);&nbsp; const addTodo = (todo) => {&nbsp; &nbsp; setTodos([...todos, todo]);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <AddTodoForm addTodo={(todo) => addTodo(todo)} />&nbsp; &nbsp; &nbsp; {todos.map((todo) => (&nbsp; &nbsp; &nbsp; &nbsp; <div> {todo.title} </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}const AddTodoForm = ({ addTodo }) => {&nbsp; const inputRef = useRef();&nbsp; const createTodo = (e) => {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; const todo = {&nbsp; &nbsp; &nbsp; title: inputRef.current.value,&nbsp; &nbsp; &nbsp; complete: false&nbsp; &nbsp; };&nbsp; &nbsp; inputRef.current.value = "";&nbsp; &nbsp; addTodo(todo);&nbsp; &nbsp; // I Need To Empty input value here&nbsp; };&nbsp; return (&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; <input type="text" ref={inputRef} />&nbsp; &nbsp; &nbsp; <button onClick={createTodo}> Add Todo </button>&nbsp; &nbsp; </form>&nbsp; );};