如何在 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 來處理。

您可以將表單的值存儲在 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} />

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或事件庫

編輯：

您應該避免直接操作 DOM，如David Caldwell在此答案中所述