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

时间:2016-10-22 20:47:29

标签: reactjs

我的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);
  }

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

但是,如果我将idonClick事件添加到我的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}

2 个答案:

答案 0 :(得分:0)

不确定您的问题是否遗漏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);
 }

答案 1 :(得分:0)

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

<MenuOption/>应如下所示

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

希望这有帮助!