子コンポーネント内の矢印関数を使用したパラメータの反復

Question

これらの親コンポーネントと子コンポーネントがあるため、子コンポーネントの項目を選択するためにクリック機能を渡します。それでも、ユーザーが要素をクリックするまで待つのではなく、子コンポーネントの関数が自動的に呼び出されるようです。それをより明確にするには、ここに私の親と子コンポーネント

export class ParentView extends Component { 
    state = { 
    selectedItem: {} 
    } 

    handleClick = (item) => { 
    alert('you click me'); 
    this.setState({selectedItem: item}); 
    } 

    render() { 
    let item = { name: 'Item-1' }; 
    return (
     <div> 
     <ChildItem item={item} handleClick={this.handleClick} /> 
     </div> 
    ); 
    } 
} 

export class ChildItem extends Component { 
    render() { 
    const {item, handleClick} = this.props; 
    return (
     <div> 
     <a onClick={handleClick(item)} /> 
     </div> 
    ); 
    } 
} 

者は、子コンポーネントに​​を渡すために、矢印の機能を使用して、私のコンポーネントである、まだ常に最初に呼び出されるアラートは、ユーザによってトリガされずにレンダリングされます。なにか提案を？

Answer 1

onClickに関数自体を渡す必要があります。

あなたはのparamでそれを呼び出すしたい場合、あなたは選択肢があります。

：アイテム

とそのバインド

• は() => handleClick(item)

以下の例のような新しい矢印関数を渡します

export class ChildItem extends Component { 
    render() { 
    const {item, handleClick} = this.props; 
    return <div> 
     <a onClick={handleClick.bind(this, item} /> 
    </div> 
    } 
} 

あなたのコードでは、の関数を呼び出しています宣言。

<a onClick={handleClick(item)} />

Answer 2

ES6方法：矢印機能=>

onClick={() => handleClick(item)} 

---

を使用して

（@ havenchykの答えは、ES5ワットでありますay）。