前提&要件
- 以下記事がベース
- クラスコンポーネント → ファンクションコンポーネントに変更したい
問題点
表示と削除に関してはリファクタリングできたのですが、
フォーム送信機能のところでinputChangeの関数をリファクタリングしている際に
onChangeがうまく効いてくれません。
フォームに入力すると[object Object]
が返されます。
こちらは何が原因なのでしょうか?
コード一部抜粋(inputChange分のみ)
jsx
1const TodoApp = () => { 2 const [todo, setTodo] = useState(''); 3 4 const inputChange = e => { 5 switch(e.target.name){ 6 case 'todo': 7 setTodo({ 8 todo: e.target.value 9 }); 10 break; 11 default: 12 break; 13 } 14 } 15 16 return ( 17 <> 18 <div className="form-group mt-4"> 19 <label htmlFor="todo">新規Todo</label> 20 <input 21 type="text" 22 className="form-control" 23 name="todo" 24 value={todo} 25 onChange={inputChange} 26 /> 27 </div> 28 </> 29 ); 30}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。