在组件上反应removeEventListener

Question

我有2个组成部分：TestingPlace和ReactionTest。

TestingPlace：

const TestingPlace = ({onClick}) => (
    <StyledWrapper onClick={onClick}>
        ...
      </StyledWrapper>

ReactionTest：

class ReactionTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //state }
    };
  }

  startTest = () => {
    this.removeEventListener("click", this.startTest); //TypeError: this.removeEventListener is not a function

    setTimeout(() => {
      this.addEventListener("click", this.startTest);
    }, 1000);
  };

  render() {
    return (
      <>
        <TestingPlace onClick={this.startTest} />
      </>
    );
  }
}

并且我想在startTest（）中删除事件侦听器x秒钟，然后再次添加eventListenr，但它不起作用。 TypeError：this.removeEventListener不是函数

Answer 1

错误表明您正在尝试调用该类中存在的方法removeEventListener，但没有一个。

要使用addEventListener或removeEventListener，您需要将其附加到eventTarget。

例如

const body = document.querySelector('body')
const clickTarget = document.getElementById('click-target')

clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false

    );

在此处查找更多信息，removeEventListener