ReactのOnClickイベント

Question

私は非常に奇妙な問題が1つあります。

私は次のリンクを持っているが

<a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}> 
     <span className="regHeaderText">{this.props.value}</span> 
     <FontAwesome name={this.props.icon} className="faIcon"/> 
</a> 

を反応させると、それは次のようになります：

しかし、私は、私はテキスト次フォントの素晴らしいアイコンをクリックすると、問題がありますリンクの名前としてが定義されていませんを取得してください。

テキストの左の部分をクリックした場合のみNEXT、この黄色のボックスには正しい名前が表示されます。

私はリンクを作成する場合は、代わりのように、またがっ：次に

<a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}> 
    <a onClick={this.props.onClick} name={this.props.name} className="regHeaderText">{this.props.value}</a> 
    <a onClick={this.props.onClick} name={this.props.name}><FontAwesome name={this.props.icon} className="faIcon"/></a> 
</a> 

それは動作しますが、リンク内のリンクを作成せずにそれを行うに任意の解決策はありますか？

EDIT

onClick: function (event) { 
    event.preventDefault(); 
    var field = event.target.name; 
    alert("The name is : " + field); 
} 

Answer 1

あなたはおそらくあなたのonClickハンドラでe.targetを使用しています。スパンをクリックすると、イベントのバブルはリンク上のハンドラまで上がりますが、ターゲットはスパンでありaではありません。あなたのonClickメソッドの最初の引数は、名前と2番目のイベントになりますリンクの名前

<a onClick={this.props.onClick.bind(this, this.props.name)} 

でバウンドのonClickを作成することができ、これを回避するために

。