[解決済み】ReactのonClick関数はレンダリング時に発火する

質問

子コンポーネントに2つの値を渡しています。

1. 表示するオブジェクトのリスト
2. 削除機能

オブジェクトのリストを表示するために.map()関数を使用していますが（reactのチュートリアルページにある例のように）、そのコンポーネント内のボタンは、オブジェクトのリストを表示するために onClick 関数は、レンダリング時に発生します（レンダリング時には発生しないはずです）。私のコードは次のようになります。

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

質問ですが、なぜ onClick という関数がレンダリング時に発生するのですが、どうすれば発生しないようにできるのでしょうか？

解決方法は？

onClickに関数を渡すのではなく、その関数を呼び出しているため、その行を以下のように変更してください。

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> は、ES6で導入されたArrow Functionと呼ばれるもので、React 0.13.3以降でサポートされる予定です。