javascript - 在 react 中动态附加和删除事件监听器

Question

remove 事件监听器似乎不适用于我的代码；我创建了一个小型代码沙箱，试图复制我面临的场景。

https://codesandbox.io/s/wild-browser-zznsj

所以基本上当 input 没有监听时，输入事件监听器应该从 input 标签中分离出来，标签中写入的任何文本都不应该写入消息状态变量，因此进一步更改为输入标签输入值不应显示在用户界面上，但这不是代码的行为方式，我认为它的行为方式是因为它没有正确分离事件监听器

Answer 1

对于这种情况，因为您正在使用输入标签。使用 change 事件监听器。

查看 MDN:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

或者当您使用 React 时，我的首选方式是:

1 - 不要使用 useEffect Hook 。

2 - 在您的回调中加入一个条件:

function callback(event) {
    if (listening) {
      setMessage(event.target.value);
    }
    return;
  }

3 - 在 JSX 代码中执行此操作。

 <input type="text" id="input" onChange={callback}/>