javascript - 如何在 React 中重置 'Enter' keyUp 上的输入字段？

Question

我正在创建一个输入，该输入添加到输入下方呈现的标签列表中。我希望当用户专注于输入字段时按下“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])

Answer 1

我会避免在 React 中直接操作 DOM。让 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} />