カスタム要素のハンドラを呼び出そうとしていません

Question

<GroupsRow />をクリックしてその呼び出しを関数にすると、インデックスを使用してプロパティを変更できます。しかし、私のクリックは一切起きませんhandler()。

export default class GroupsContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handler(index) { 
    console.log(index) 
    } 


    _repeatGroupRows(tags) { 
    return tags.map((tag, index) => 
     <GroupsRow key={index} tag={tag} onClick={this.handler.bind(this, index)} /> 
    ); 
    } 

    render() { 
    return (
     <div className="groups-list-wrapper"> 
     <GroupsHeader /> 
     {this._repeatGroupRows(this.props.state.tags)} 
     </div> 
    ); 
    } 
} 

Answer 1

GroupsRowコンポーネントのコードは投稿していませんが、このコンポーネント内でこのハンドラを呼び出さないとします。
GroupsRowは、通常のDOM要素ではなく反応要素であるため、props.onClickハンドラを呼び出す必要があります。

Answer 2

map機能は、コンテキストを保存していないので、thisは、あなたが期待するものではありませんし、this.handlerは未定義になります。

mapでもこの正確な目的のために第2引数を受け入れます。これは次のようになります。

EDIT：@lustoykovは、バインドが使用されているために問題ではないという彼の答えには正しいと答えました。私はバインドとthisArgの両方を使用していない多くの人々が見ているように、私の部分にトンネルビジョンのビットが、これは今は問題ではありません！

Answer 3

あなたは間違った場所を探しています。この例は間違いなく動作しますが、hereは非常によく似たバージョンです。

---

EDIT：私はSag1vの爪@それを考える - この場合にはonClickが<GroupsRow />に渡されるだけプロパティです。コンポーネントのルート要素（おそらく<div />）では、あなたは再びそれを渡す行う必要があるだろう：

<div onClick={this.props.onClick} /> 

PS。 @gravityplanx - map関数のコンテキストは、矢印関数が親のコンテキストを再利用するため、thisコンテキストは必要ありません。