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

  )

}

Answer 2

只需在 rer 中获取当前 DOM 并设置值“”( inputRef.current.value = "";)。例子：

import React, { useRef, useState } from "react";

export default function DisableElevation() {

  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {

    setTodos([...todos, todo]);

  };

  return (

    <div>

      <AddTodoForm addTodo={(todo) => addTodo(todo)} />

      {todos.map((todo) => (

        <div> {todo.title} </div>

      ))}

    </div>

  );

}

const AddTodoForm = ({ addTodo }) => {

  const inputRef = useRef();

  const createTodo = (e) => {

    e.preventDefault();

    const todo = {

      title: inputRef.current.value,

      complete: false

    };

    inputRef.current.value = "";

    addTodo(todo);

    // I Need To Empty input value here

  };

  return (

    <form>

      <input type="text" ref={inputRef} />

      <button onClick={createTodo}> Add Todo </button>

    </form>

  );

};