Как мне сбросить поле ввода при вводе ключа в React?

Question

Я создаю вход, который добавляет список тегов, отображаемых под входом. Я хотел бы, чтобы ввод pu sh указывал на список, когда нажата кнопка «Ввод», когда пользователь сфокусирован на поле ввода. Затем поле сбрасывается в пустое или "", и пользователь может добавить другой тег таким же образом.

Проблема, с которой я сталкиваюсь, заключается в том, что после сброса значения в пустую строку, каждый раз, когда я пытаюсь захватить значение ввода, возвращается пустая строка.

Вот что у меня есть:

    const [listOfOptions, addOption] = React.useState([])

    let newOption = () =>{
        let addField = document.getElementById('addOption')
        let grabText = addField.value;
        console.log('Grabtext ='+ grabText)
        addOption([...listOfOptions, grabText])
        addField.reset();
    }


    useEffect(() => {
        document.getElementById('addOption').addEventListener("keyup", function(event) {
            if (event.key === "Enter") {
                        newOption()
            }}
        );    }, [listOfOptions])

Answer 1

Я бы избегал прямого манипулирования DOM в React. Пусть React Virtual DOM обрабатывает это.

Вы можете сохранить значение формы в состоянии, а затем при отправке сбрасывает состояние до ''.

Примерно так:

const [value, setValue] = useState('');

const handleFormValueChange = (event) => setValue(event.target.value);

const resetFormValue = () => setValue('');

<input type="text" value={value} onChange={(event) => handleFormValueChange(event)} />
<input type="submit" onSubmit={resetFormValue} />

Answer 2

Ответ, принимая во внимание предыдущие предложения, спасибо за помощь, будет следующим:

const [value, setValue] = useState('');
const [listOfOptions, addOption] = React.useState([])


const handleFormValueChange = (event) => setValue(event.target.value);

    let newOption = (event) => {
        if (event.key === "Enter") {
            addOption([...listOfOptions, value]);
            setValue('');
        }
    }

<input value={value} onChange={(event) => handleFormValueChange(event)} onKeyUp={(event)=>newOption(event)} id="addOption" />

Это решение использует клавишу Enter, чтобы отправить и сбросить значение, при этом изменяя только React's. виртуальный DOM.

Answer 3

Предполагая, что addOption является <input>, <select> или <textarea>, он не должен иметь метод reset(). Измените .value вместо

addField.value = "";

Не забудьте отключить eventListener на этом компоненте dismount.

useEffect(() => {
  const element = document.getElementById("addOption");
  const listener = event => {
    if (event.key === "Enter") {
      newOption();
      event.preventDefault();
    }
  };

  element.addEventListener("keyup", listener);

  return () => element.removeEventListener("keyup", listener);
}, [listOfOptions]);

Также, пожалуйста, избегайте прямого изменения DOM непосредственно для элемента React, это может нарушить процесс рендеринга React.

Вместо этого используйте библиотеку состояний, такую ​​как this или библиотека событий

Edit :

Вам следует избегать прямого обращения с DOM, как сказано в этом ответе от David Caldwell