TodoListを作成中、タスクを入力できない
onchange={(e) => setText(e.target.value)}
× onchange
○ onChange
恐らくこちらが原因ではないでしょうか?
JSXはHTMLのように書けますが実際は別物で、HTMLの属性をキャメルケースで表現するお約束があります。
React では、DOM のプロパティと属性(イベントハンドラを含む)全てがキャメルケースで名前付けされる必要があります。例えば、HTML 属性 tabindex に React で対応する属性は tabIndex です。
e.target.valueの役割について
e.target.valueは今回のケースで言うと、
inputに入力などのイベントが発生した際に(e)にイベントのオブジェクトがセットされます。
イベントのオブジェクトの要素から入力された値を取得している形です。
console.logでe
, e.target
, e.target.value
それぞれ出力して中身を見てみるとイメージしやすいかもしれないですね
e
イベントのデータが入ったオブジェクト
e.target
<input placeholder="タイトルを入力" value="hoge">
e.target.value
value="hoge"
のhoge
1Like