FullStackOpen Part2-b Forms メモ

フォーム作成は以下の通り
<form onSubmit={addNote}> サブミットはformで！
 <input />
 <button type='submit'>save<button>
</form>

イベントハンドラーは以下の通り
const addNote = (event) => {
 event.preventDefault() //フォームsubmit時のデフォルト動作を防ぐ
 // some actions here
}

eventの中身は以下のような感じ

フォームが入っている

Controlled Component

フォーム中のinputデータにアクセスするための方法の一つがControlled Componentである

event.target.valueのような形でinputの中身にアクセス
  const handleNoteChange = (event) => {
　console.log(event.target.value)
　setNewNote(event.target.value)
}
preventDefaultはonChangeでは何もないため必要ない。フォーム送信時はいる

inputのvalueとonChangeは必ずセットで使うこと！
そうでないとフォームの入力を変更できない。

全体構造

  const [notes, setNotes] = useState(props.notes)
  const [newNote, setNewNote] = useState(
    'a new note..'
  ) 

  const addNote = (event) => {
    event.preventDefault()
    const noteObject = {
      content: newNote,
      important: Math.random() < 0.5,
      id: notes.length + 1,
    }

    setNotes(notes.concat(noteObject))
    setNewNote('')
  }

  const handleNoteChange = (event) => {
    setNewNote(event.target.value)
  }

<form onSubmit={addNote}>
        <input
          value={newNote}
          onChange={handleNoteChange}
        />
        <button type='submit'>save</button>
</form>

Filtering Displayed Elements

filter関数をうまく使う

const [showAll, setShowAll] = useState(true)
const notesToShow = showAll ? notes : notes.filter(note => note.important)
...
<ul>
 {notesToShow.map(note => <Note key={note.id} note={note} />)}
</ul>