ボタンをクリックする前にonClickイベントが発生しました

Question

ユーザーが削除ボタンをクリックするたびにliを削除します。だから私はインデックスを渡すが、それをクリックする前にトリガされた、私は値を渡すために間違っていると思う。

http://jsfiddle.net/axhpuepq

var App = React.createClass({ 
    getInitialState(){ 
    return { 
     items:[1,2,3], 
     isEdit: false 
    } 
    }, 
    renderEditForm(){ 
    return(
    <div> 
    <input type="text" /> 
    <button onClick={this.saveHandler}>save</button> 
    </div> 
    ) 
    }, 
    ItemCtrl(index){ 
    return(
    <div className="itemCtrlWrap"> 
    <button onClick={this.editHandler}>Edit</button> 
    <button onClick={this.dltHandler(index)}>Delete</button> 
    </div> 
    ) 
    }, 
    editHandler(){ 
    this.setState({isEdit:true}) 
    }, 
    saveHandler(){ 
    this.setState({isEdit:false}) 
    }, 
    dltHandler(index){ 
    console.log(index) //shall recieve index here upon click 
    }, 
    renderItem(){ 
    return(
     this.state.items.map((item,i)=> 
     <li key={i}> {this.state.isEdit ? this.renderEditForm() : item} {this.ItemCtrl(i)}</li>) 
    ) 
    }, 
    render(){ 
     return(
     <ul> 
      {this.renderItem()} 
     </ul> 
    ) 
    } 
}) 

React.render(<App />, document.getElementById('container')); 

Answer 1

あなたはここで、機能を実行するだけではなく、それを設定している：

onClick={this.dltHandler(index)} 

あなたがそれらバインドするいくつかの引数を渡したい場合。同様に：

onClick={this.dltHandler.bind(this, index)} 

または矢印関数を使用する：あなたが気付いた場合onClickにそれを宣言しながら

onClick={() => this.dltHandler(index)} 

、我々は、機能を設定しています。そして、この関数はただdltHandlerを実行しています。

Answer 2

このようにonClickを定義すると、インスタンシエーション時にその関数が呼び出されます。あなたはbindを使用するか、匿名関数を定義する必要があります。

<button onClick={this.dltHandler.bind(this, index)}>Delete</button> 

または

<button onClick={() => this.dltHandler(index)}>Delete</button> 

これらの両方がonClickハンドラに関数を渡す - しかしonClickが発射されるまで、彼らは実行されません。これを行うと、すべてのレンダー呼び出しで新しい関数が生成されることに注意してください。あなたが非常に頻繁にレンダリングしている場合、これは計算上高価になります。

パフォーマンスが問題になる場合は、ボタンを定義済みのdltHandler機能を持つ別のコンポーネントにリファクタリングする方がよい解決策です。