は、単一の削除可能なチップを表示するリンクに

Question

私は多くのチップ（ http://react-toolbox.com/#/components/chip）を追加しようとしたがリアクトで、私は本当に失敗

...

exemplesツールボックス削除可能なチップを反応します。 1つのDeletable Chipがある限り動作しますが、それ以上のチップで動作させることはできません。ここで

は私のコードです：

import React, { PropTypes } from 'react'; 
import Chip from 'react-toolbox/lib/chip'; 

var Chiplist = [ 
    {'id': 1, 'title': 'Keyword 1'}, 
    {'id': 2, 'title': 'Keyword 2'}, 
    {'id': 3, 'title': 'Keyword 3'}, 
    {'id': 4, 'title': 'Keyword 4'} 
]; 

class ChipsList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {deleted : {1: false, 2: false, 3: false, 4: false}}; 
    /*for(i = 0; i < Chiplist.length; $i++){ 
    state.deleted.i = false; 
    }*/ 
    } 


/* for(i = 0; i < Chiplist.length; $i++){ 
    state.deleted.i = false; 
    }*/ 

    handleDeleteClick(index) { 
    /*this.setState({ 
     deleted : {1: false, 2: true, 3: false, 4: false} 
    }); 
    console.log(this);*/ 
    console.log(index); 
    }; 

    render() { 
    const mychips = Chiplist.map((chip, index) => 
     this.state.deleted[index] ? null : (<Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}>{chip.title}</Chip>) 
    ); 
    return (
     <div className="chips-list"> 
     { mychips } 
     </div> 
    ); 
    } 
} 

export default ChipsList; 

私は関数にインデックス値を渡す場合、関数はすべての時間と呼ばれているのはなぜ、私はなぜか分からない...

Answer 1

あなたが関数を呼び出しているので：

<Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}> 

機能を渡すための正しい方法はすなわち、それを呼び出すことではないことである。

<Chip deletable onDeleteClick={this.handleDeleteClick}> 

ただし、インデックスが必要なので、何とか保存する必要があります。 closuresと入力します。ときに私の答えのための

<Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}>