前提・実現したいこと
CODEPREPでreact.jsのブックを読んでいます
そのときにこのセクションでわからないことがありましたので質問しました
発生している問題・エラーメッセージ
TodoFormコンポーネント
にて記述されているvalue属性
は、どこでも使われていないように見えますが、このvalue属性
を設定する意味はなんでしょうか?
inputタグの中に書かれる文字はonChangeメソッド
のsetStateで変更しているので必要ないと思うのですが...
該当のソースコード
main.jsx
jsx
1const DEFAULT_TODOS = [ 2 { title: "Reactで作るTodoアプリ" }, 3 4 { title: "はじめてのReact", completed: true }, 5 6]; 7function Todo(props) { 8 9 return ( 10 <li className="todo-item"> 11 <input 12 type="checkbox" 13 checked={props.todo.completed} 14 /> 15 <span 16 style={{ textDecoration: props.todo.completed ? "line-through" : "" }} 17 > 18 {props.todo.title} 19 </span> 20 <button>x</button> 21 </li> 22 ); 23} 24 25 26function TodoList(props) { 27 28 const todoList = props.todos.map((todo, index) => { 29 return ( 30 <Todo 31 key={index} 32 todo={todo} 33 /> 34 ); 35 }); 36 return ( 37 <ul className="todo-list"> 38 {todoList} 39 </ul> 40 ); 41 42function TodoForm(props) { 43 return ( 44 <form className="todo-form" onSubmit={props.onSubmit}> 45 <label> 46 新しいTodo 47 <input 48 49 onChange={props.onChange} 50 value={props.value} // なぜ設定する必要があるのか? 51 /> 52 53 </label> 54 <button type="submit">追加する</button> 55 </form> 56 ); 57 58 59} 60 61class App extends React.Component { 62 constructor(props) { 63 super(props); 64 this.state = { 65 todos: DEFAULT_TODOS, 66 newTodo: "" 67 }; 68 69 // ハンドラの中でthisコンテキストを参照するので、ここでthisコンテキストをApp自身に固定しておく 70 71 this.onChange = this.onChange.bind(this); 72 this.onSubmit = this.onSubmit.bind(this); 73 } 74 onSubmit(e) { 75 // フォームが送信されるのを防ぐ 76 e.preventDefault(); 77 const { newTodo, todos } = this.state; 78 79 // 値が空の場合は何もしない 80 if (!newTodo.trim()) { 81 return; 82 } 83 84 // 配列をコピーを作成する 85 const newTodos = todos.slice(); 86 // 新しいTodoを追加する 87 newTodos.push({ 88 title: newTodo, 89 completed: false 90 }); 91 this.setState({ 92 todos: newTodos, 93 newTodo: "" 94 }); 95 } 96 onChange(e) { 97 const { value } = e.target; 98 this.setState({ newTodo: value }); 99 } 100 render() { 101 return ( 102 <div className="todo"> 103 <TodoForm 104 value={this.state.newTodo} 105 onChange={this.onChange} 106 onSubmit={this.onSubmit} 107 /> 108 <TodoList 109 todos={this.state.todos} 110 /> 111 </div> 112 ); 113 } 114} 115ReactDOM.render( 116 <App />, 117 document.getElementById("root") 118);
よろしくお願いします
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。