div要素にonClickするとターゲットIDが渡されません

Question

div要素にonClickイベントが接続されている場合、ターゲットIDが渡されないReact.jsアプリケーションに問題があります。

これは私がコンポーネントを追加する方法です：

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

これが動作するようには思えません。しかし

、私が代わりに私のp要素にidとonClickイベントを追加した場合...

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

...それすべてのクリックでちょうど予想通り、正しいIDログ機能します。

なぜ、clickイベントがdivに関連付けられている場合、idが渡されないのですか？

私はES6とバベルを使用しています。

私はこのようにそれらを宣言し、私は「ダム」のコンポーネントを使用していることを明確にする必要があります、それを使用しているとき{this.props.title}を使用する必要はありません理由です

const MenuOption = ({title, onOptionClick}) 

...。

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

方法2（ES6）：

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

方法あなたの質問constructorを逃したがfollowing--

方法1（JSX）のいずれかを試すよう

Answer 1

わかりません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> 

希望のようになります！