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来响应生命周期钩子componentDidMount。这可确保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);
}

这应该有用。

Answer 2

在某个阶段使用undefined作为参数调用moveBall函数。然后，event.target ?检查会因您提供的错误而崩溃。

onMouseOver可能总是很好，因为React提供了这个。

相反，我想这是你最后给出的手动电话。您的this.props.navItem没有价值吗？

值得在调用函数之前注销该属性，以确保它始终如您所愿。

React - 无法读取属性＆＃39; target＆＃39;未定义的

2 个答案: