子コンポーネントに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
、レンダリングで関数が起動するのはなぜですか?