我的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}
。
答案 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>
希望这有帮助!