在事件处理程序中访问React组件参数

时间:2018-11-23 17:42:35

标签: javascript reactjs

我不确定是否要采用最佳方法,但是我试图在onMouseOver事件处理程序中访问React组件的参数。

事件处理程序:

  handleTabHover = event => {
    this.setState({ indicatorColor: event });
  };

反应成分:

  <LinkTab
    label="Dashboard"
    to="/"
    indicatorColor="gray"
    onMouseOver={this.handleTabHover}
    onFocus={this.handleTabHover}
  />

基本上,我希望handleTabHover函数中的eventLinkTab组件,然后我可以访问它的“ indicatorColor”参数来设置类indicatorColor的状态,但是事实并非如此。我是React和ES6语法的新手,所以我确定我缺少事件处理程序参数如何工作的基础知识。

1 个答案:

答案 0 :(得分:1)

  

基本上,我希望handleTabHover函数中的“事件”是“ LinkTab”组件,然后我可以访问它的“ indicatorColor”参数来设置类“ indicatorColor”的状态,但事实并非如此。 / p>

是的,你不能那样做。

正确的方法是

<LinkTab
  label="Dashboard"
  to="/"
  indicatorColor={Colors.Deloitte.Primary.coolGray2}
  onMouseOver={() => this.handleTabHover(Colors.Deloitte.Primary.coolGray2)}
  onFocus={this.handleTabHover}
/>

在您的处理程序中将会

handleTabHover = indicatorColor => {
    this.setState({ indicatorColor });
};

您可以在此处阅读更多内容。 https://reactjs.org/docs/faq-functions.html#how-do-i-pass-a-parameter-to-an-event-handler-or-callback