onClick on div元素不会传递目标ID

Question

我的React.js应用中存在一个问题，如果在onClick元素上附加div事件，则目标ID无法传递。

这就是我添加组件的方式：

<MenuOption title="Users" onOptionClick={this.onOptionClick}/>

这是我MenuOption组件的jsx部分：

<div id={title} className="row menu-option" onClick={onOptionClick}>
   <p>{title}</p>
</div>

正如您所看到的，我只是将道具标题指定为ID和onClick事件。

回到父组件中，实现onClick方法：

  onSidebarOptionClick(e) {
    console.log(e.target.id);
  }

这似乎不起作用，因为它始终记录未定义。

但是，如果我将id和onClick事件添加到我的p元素而不是......

<div className="row menu-option">
   <p id={title} onClick={onOptionClick}>{title}</p>
</div>

...它按预期工作，每次点击都会记录正确的ID。

那么，如果点击事件附加到div，为什么不传递ID？

我正在使用ES6和babel。

我应该澄清我正在使用＆＃34; dumb＆＃34;组件，声明如下：

const MenuOption = ({title, onOptionClick})

...这就是为什么在使用时不需要使用{this.props.title}。

Answer 1

不确定您的问题是否遗漏constructor，但请尝试以下其中一项 -

方法1（JSX）：

<MenuOption title="Users" onOptionClick={this.onOptionClick.bind(this)}/>

方法2（es6）：

   constructor(props) {
      super(props);
      this.onOptionClick = this.onOptionClick.bind(this);
   }

方法3（es-next）：

onSidebarOptionClick = (e) => {
    console.log(e.target.id);
 }

Answer 2

当您将onOptionClick作为道具传递给<MenuOption/>时，应将其声明为this.porops.onOptionClick。

<MenuOption/>应如下所示

<div id={title} className="row menu-option" onClick={thi.props.onOptionClick}>
   <p>{title}</p>
</div>

希望这有帮助！