如何在React中通过onClick获取组件？解决evt参数未定义问题

嘿，我立马就发现你遇到的问题根源啦！你在按钮的onClick回调里用了箭头函数，但调用getcomponent的时候没有传递事件对象，所以函数里的evt自然就是undefined啦。

错误代码回顾 #

getcomponent(evt){ 
  console.log(evt.target) 
  //... 
}
//...
render() { 
  return (<button id="btn" onClick={() =>this.getcomponent()}></button>); 
}

两种修正方案 #

方案1：直接绑定函数（推荐）

React会自动将事件对象作为第一个参数传递给onClick绑定的函数，所以你可以直接把getcomponent作为回调：

render() { 
  return (<button id="btn" onClick={this.getcomponent}></button>); 
}

⚠️ 注意：如果你的getcomponent里用到了this，记得要在组件构造函数里绑定this，或者用类字段的箭头函数写法定义getcomponent，避免this指向错误。比如：

// 类字段写法（无需手动绑定this）
getcomponent = (evt) => { 
  console.log(evt.target) 
  //... 
}

方案2：箭头函数里手动传递事件参数

如果你必须用箭头函数（比如需要额外传递其他参数），记得把evt传进去：

render() { 
  return (<button id="btn" onClick={(evt) =>this.getcomponent(evt)}></button>); 
}
// 要是还要传其他参数，比如自定义id，可以这么写：
// onClick={(evt) =>this.getcomponent(evt, 'custom-btn-id')}

这样修改后，你就能正常获取到evt.target啦！

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