React报错：Cannot read property 'target' of undefined 解决方案问询

嘿，我来帮你搞定这个问题！首先咱们理清核心需求：一是React事件绑定里不直接调用函数（避免渲染时就执行），还能拿到event；二是让moveBall函数既能处理事件触发的场景，又能在页面加载时直接传入你提前获取的元素复用。

第一步：解决事件绑定的问题 #

React的事件处理机制会自动把event对象作为第一个参数传给绑定的函数，所以你完全不用用箭头函数包裹来手动传event！不过要注意this的指向，不然函数里可能拿不到组件实例的属性（比如你说的this.navItem），这里有两种靠谱的处理方式：

方式1：构造函数里绑定this

constructor(props) {
  super(props);
  this.navItem = document.querySelector('.navig...');
  // 关键：把moveBall的this绑定到组件实例上
  this.moveBall = this.moveBall.bind(this);
}

moveBall(eventOrElement) {
  // 你的兼容判断：如果是事件对象就取target，否则直接用传入的元素
  const element = eventOrElement.target ? eventOrElement.target : eventOrElement;
  // 接下来写你的业务逻辑就行～
}

// 事件绑定直接写函数引用，React会自动把event传进去
onMouseOver={this.moveBall}

方式2：用类属性箭头函数（更简洁）

如果你觉得构造函数绑定有点麻烦，可以直接用箭头函数定义moveBall，这样this会自动指向组件实例：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.navItem = document.querySelector('.navig...');
  }

  // 箭头函数定义，this自动绑定
  moveBall = (eventOrElement) => {
    const element = eventOrElement.target ? eventOrElement.target : eventOrElement;
    // 业务逻辑...
  }

  render() {
    // 同样直接绑定函数引用
    return <div onMouseOver={this.moveBall}>导航元素</div>;
  }
}

第二步：页面加载时复用函数 #

当页面加载完成后，你直接调用this.moveBall(this.navItem)就行，因为你的判断逻辑会识别出这是直接传入的元素，不会去取target：

componentDidMount() {
  // 页面加载后立即执行，传入提前获取的元素
  this.moveBall(this.navItem);
}

为啥原来的写法会报错？ #

你之前写的onMouseOver={(event) => { this.moveBall(event) }}逻辑本身没问题，但如果报错，大概率是this的指向不对——比如moveBall里的this不是组件实例，导致你访问this.navItem时出错。上面两种绑定方式都能解决this的问题，还能避免每次渲染都创建新的箭头函数，性能更优～

内容的提问来源于stack exchange，提问作者MaxwellLynn