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

Question

我正在尝试在用户输入时发出一个套接字事件，但是我希望当输入的值在状态中改变时只发出一次事件，当值被清除时只发出一次事件。

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

我能够做到这一点，但我的代码在每次击键时发出。我的要求是两个事件只发出一次。

• 当状态
中存在值时为1
• 状态
没有值时另一个

Answer 1

在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");
}
}