在 React 控制的输入上仅监听一次变化

Listen for Change ONLY ONCE on a React Controlled Input

我正尝试在用户输入时发出一个套接字事件，但我希望该事件仅在输入值的状态发生变化时发出一次，而另一个事件在该值被清除时发出一次。

const [text, setText] = useState("");

...

useEffect(()=> {
      if (text) {
        // EMIT EVENT
        console.log("input has value emit event", text);
      } else {
        console.log("input has no value emit event");
      }
}, [text]);

...

const handleChange = e => {
    setText(e.target.value);
}

...

<Input type="text" value={text} onChange={handleChange} />

我能够完成此操作，但我的代码会在每次击键时发出。我的要求是两个事件都只发出一次。

状态中有值时为一个
状态中没有值时的另一个

改为在 handleChange 中进行检查，以便您可以将先前值与新值进行比较。

const handleChange = e => {
    const newText = e.target.value;
    setText(newText);
    if (newText && !text) {
        console.log("input has value emit event", text);
    } else if (!newText && text) {
        console.log("input has no value emit event");
    }
}