时间戳

首页 > 解决方案 > 如何在 React 的“Enter”键上重置输入字段？

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

问题描述

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

标签： javascriptreactjsdomjsx

解决方案

我会避免在 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} />

推荐阅读