javascript - React - 无法读取未定义的属性 'target'

Question

我正在调用如下所示的函数，并理解这就是我收到此错误的原因。有没有办法不调用函数但仍然传递事件属性？

onMouseOver={(event) => { this.moveBall(event) }}

想要这样做的原因是我可以像这样检查函数:

const element = event.target ? event.target : event;

因为我想重用此函数来在加载时传递元素:

// Below line is in a constructor.
this.navItem = document.querySelector('.navigation__item');
// Being called after my render
this.moveBall(this.props.navItem);

感觉这应该是可行的..

我已设法使用以下代码解决此问题，但我相信一定有更好的方法来实现此目的:

    window.addEventListener('load', () => {
        const activeState = document.querySelector('.navigation__item .active')
        this.moveBall(activeState)
    });

** 更新 **完整组件代码 https://jsfiddle.net/fvn1pu5r/

Answer 1

根据您的上次更新，您只需将第一次调用移动到 this.moveBall 即可对生命周期钩子(Hook) componentDidMount 使用react。这可确保 DOM 中包含 .navigation_item 节点。因此，删除行

        window.addEventListener('load', () => {
        const activeState = document.querySelector('.navigation__item .active')
        this.moveBall(activeState)
    });

从 render 方法并将 componentDidMount 方法添加到您的类中，如下所示:

componentDidMount() {
  const activeState =  document.querySelector('.navigation__item .active');
  this.moveBall(activeState);
}

这应该有效。