Блог

Главная - Вопросы по программированию - можно ли использовать привязку useRef для очистки входного значения?

можно ли использовать привязку useRef для очистки входного значения?

#javascript #reactjs #react-hook-form

#javascript #reactjs #реагировать-привязка-форма

Вопрос:

Я использовал 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>
  )
}

Ответ №1:

Очистите ввод после отправки to do is the way.

   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>
  )
}

Комментарии:

1. Спасибо, чувак, я пытался сделать это решение, прежде чем спрашивать, но у меня это не сработало, потому что я набрал « == « два равных 🙂 большое спасибо

Ответ №2:

Просто получите текущий DOM в rer и установите значение «» ( 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>
  );
};