子コンポーネントから親コンポーネントに対して setState を実行するための推奨パターンは何ですか。
var Todos = React.createClass({
getInitialState: function() {
return {
todos: [
"I am done",
"I am not done"
]
}
},
render: function() {
var todos = this.state.todos.map(function(todo) {
return <div>{todo}</div>;
});
return <div>
<h3>Todo(s)</h3>
{todos}
<TodoForm />
</div>;
}
});
var TodoForm = React.createClass({
getInitialState: function() {
return {
todoInput: ""
}
},
handleOnChange: function(e) {
e.preventDefault();
this.setState({todoInput: e.target.value});
},
handleClick: function(e) {
e.preventDefault();
//add the new todo item
},
render: function() {
return <div>
<br />
<input type="text" value={this.state.todoInput} onChange={this.handleOnChange} />
<button onClick={this.handleClick}>Add Todo</button>
</div>;
}
});
React.render(<Todos />, document.body)
親の状態で維持される ToDo 項目の配列があります。親の状態にアクセスし、TodoFormのhandleClickコンポーネントから新しい ToDo 項目を追加したいと思います。私のアイデアは、親で setState を実行して、新しく追加された ToDo 項目をレンダリングすることです。
ベストアンサー1
親では、必要な setState を実行するような関数を作成しaddTodoItem、その関数を props として子コンポーネントに渡すことができます。
var Todos = React.createClass({
...
addTodoItem: function(todoItem) {
this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));
},
render: function() {
...
return <div>
<h3>Todo(s)</h3>
{todos}
<TodoForm addTodoItem={this.addTodoItem} />
</div>
}
});
var TodoForm = React.createClass({
handleClick: function(e) {
e.preventDefault();
this.props.addTodoItem(this.state.todoInput);
this.setState({todoInput: ""});
},
...
});
TodoForm の handleClickを呼び出すことができますaddTodoItem。これにより、親に対して setState が実行され、新しく追加された Todo 項目がレンダリングされます。このアイデアが理解できたと思います。