如何在 React 的“Enter”键上重置输入字段？答案

【问题标题】：How do I reset an input field on 'Enter' keyUp in React?如何在 React 的“Enter”键上重置输入字段？
【发布时间】：2020-06-09 13:15:24
【问题描述】：

我正在创建一个输入，该输入添加到输入下方呈现的标签列表中。当用户专注于输入字段时按下“Enter”时，我希望输入将标签推送到列表中。然后该字段重置为空白或“”，用户可以以相同的方式添加另一个标签。

我遇到的问题是，在值被重置为空字符串后，每当我尝试获取输入的值时，都会返回一个空字符串。

这是我目前所拥有的：

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

【问题讨论】：

我觉得这里没有理由使用任何 dom api。为什么不将 keyup 监听器放在 react 元素上并使用状态作为值？

标签： javascript reactjs dom jsx

【解决方案1】：

假设addOption 是<input>、<select> 或<textarea>，它不应该有reset() 方法。改为修改.value

addField.value = "";

不要忘记在此组件卸载时分离 eventListener。

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 或event library 等状态库

编辑：

您应该避免像this answer David Caldwell 中所说的那样直接操作 DOM

【讨论】：

【解决方案2】：

我会避免在 React 中直接操作 DOM。让 React 的 Virtual DOM 来处理。

您可以将表单的值存储在 state 中，然后在提交时将 state 重置为 ''。

类似这样的：

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

【讨论】：

【解决方案3】：

考虑到之前的建议，感谢您的帮助，答案如下：

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 的虚拟 DOM。

【讨论】：