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

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

Answer 3

假设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

如何在React中的“ Enter” keyUp上重置输入字段？

3 个答案: