初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう!
を参考にTODOアプリを作成しようとしています。
以下のようにHome.js,todo.js,add.jsのように機能ごとに分けたいです。その際add.js内においてボタンがクリックされた際にtodo.js内のstateに値を渡したいのですが、どのようにすればよいでしょうか。
よろしくお願いします。
Home.js
import React, { Component } from "react";
import Add from "./add";
import Todo from "./todo";
export default class Home extends Component {
render() {
return (
<div>
<Todo />
<Add />
</div>
);
}
}
todo.js
import React, { Component } from "react";
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
name: "",
};
}
render() {
const { todos } = this.state;
return (
<div>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
}
export default Todo;
add.js
import React, { Component } from "react";
class Add extends Component {
onInput = (e) => {
this.setState({
name: e.target.value,
});
};
addTodo = () => {
const { todos, name } = this.state;
this.setState({
todos: [...todos, name],
});
};
render() {
return (
<div>
<input type="text" onInput={this.onInput} />
<button onClick={this.addTodo}>登録</button>
</div>
);
}
}
export default Add;