簡単なTodoリストを作成しているのですが
タスクを追加させる機能で入力フォームに新しくタスクを登録させた後、
追加した内容がフォームに残ったままになってしまいます。
追加はできているので、フォーム内を空にさせたいのですがググってみましたが分からず質問させていただきました。
分かる方知恵をお貸しください。宜しくお願いします。
onClickAddButton(event) { this.setState({ todoInputValue: ""});\ここに空をセットしました。 this.props.onAddTodo(this.state.todoInputValue); }
MainArea.js
import React from "react"; import Header from "./header"; import Footer from "./footer"; import ListItem from "./listItem"; export default class MainArea extends React.Component { constructor(props) { super(props); this.state = { todoInputValue: "" } } onChangeTodoInput(event) { this.setState({ todoInputValue:event.target.value }); } onClickAddButton(event) { this.setState({ todoInputValue: ""}); this.props.onAddTodo(this.state.todoInputValue); } onCompleteTodo(id) { this.props.onCompleteTodo(id); } onDeleteTodo(id) { this.props.onDeleteTodo(id); } renderTodoItems() { let todoItemDom = []; for (let i = 0; i < this.props.todoList.length; i++) { if (!this.props.todoList[i].completed) { let todoItem = <ListItem key={"item-" + i} data={this.props.todoList[i]} completeTodo={this.onCompleteTodo.bind(this)} deleteTodo={this.onDeleteTodo.bind(this)} />; todoItemDom.push(todoItem); } } return todoItemDom; } render() { return ( <div className="main-area"> <Header /> <main className="list-area"> <div className="todo-input-area"> <input type="text" className="todo-input" placeholder="todoを追加" onChange={this.onChangeTodoInput.bind(this)} /> <button className="add-button" onClick={this.onClickAddButton.bind(this)}>登録</button> </div> <ul className="todo-list"> {this.renderTodoItems()} </ul> </main> <Footer /> </div> ) } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/03 03:43 編集