Question

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

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

因此，基本上在input is not listening时，应将输入事件侦听器与输入标签分离，并且不应将标签中写入的任何文本写入消息状态变量，因此应进一步更改输入标签输入值没有显示在ui上，但这不是代码的行为方式，我认为它的行为方式是因为它无法正确分离事件侦听器

Answer 1

您正在尝试附加“输入”事件侦听器。没有像这样的事件监听器。尝试使用“ keypress”，“ keydown”等。它工作正常。检查代码沙箱

https://codesandbox.io/s/autumn-bird-4b09c

让我知道这是否可以解决您的问题。

Answer 2

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

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

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

1-请勿使用useEffect钩子。

2-在您的callback中放置一个条件：

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

3-使用JSX代码即可。

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

Answer 3

不是理想的方法。但是您可以替换输入元素本身，所有侦听器都将被注销。

https://codesandbox.io/s/condescending-field-6b4fr

 var old_element = document.querySelector("#input");
      var new_element = old_element.cloneNode(true);
      old_element.parentNode.replaceChild(new_element, old_element);

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

3 个答案: