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

Question

我不确定我是否是最好的方法，但我正在尝试在 onMouseOver 事件处理程序中访问 React 组件的参数。

事件处理程序：

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

反应组件：

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

基本上，我希望event在 handleTabHover 函数中成为LinkTab组件，然后我可以访问它的“indicatorColor”参数来设置类indicatorColor状态，但事实并非如此。我是 React 和 ES6 语法的新手，所以我确信我错过了一些关于事件处理程序参数如何工作的基本知识。

标签： javascriptreactjs

Answer 1

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

是的，你不能那样做。

正确的方法是

<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