星を押せるようになりました。今回は入力です。検索ボックスに文字を打つと、一覧がその場でしぼりこまれるようにします。
イベントは「関数を渡す」
ReactではaddEventListenerを書きません。属性として関数を渡します。
<button onClick={handleClick}>おす</button>HTMLのonclickと違い、キャメルケース（onClick）で、渡すのは文字列ではなく関数です。
よく使うイベントは、素のJavaScriptと同じ顔ぶれです。
| イベント | 使う場面 |
|---|---|
onClick | ボタン・カードを押す |
onChange | 入力欄の中身が変わった |
onSubmit | フォームの送信 |
onKeyDown | キーが押された |
イベントオブジェクトの受け取り方
関数の第1引数に、イベントの情報が渡ってきます。
function handleChange(event) {
console.log(event.target.value) // 入力された文字
}event.targetがイベントが起きた要素、.valueがその中身。ここは素のJavaScriptとまったく同じです。
フォームの送信でページが再読みこみされるのを止めるのも同じです。
function handleSubmit(event) {
event.preventDefault()
…
}入力欄はstateに預ける（制御コンポーネント）
素のJavaScriptでは、入力欄の値はDOMが持っていました。Reactではstateに持たせて、入力欄はそれを映すだけにします。
const [keyword, setKeyword] = useState('')
<input
type="search"
value={keyword}
onChange={(event) => setKeyword(event.target.value)}
/>流れはこうです。
- 文字を打つ →
onChangeが呼ばれる setKeywordでstateが更新される- 画面が描き直され、
value={keyword}に新しい文字が入る
画面に出ている文字＝stateの値が常に保証されるので、検索や送信のときに「いまの入力値」をDOMから取りにいく必要がなくなります。この書き方を制御コンポーネントと呼びます。
チェックボックスはvalueではなくcheckedを使います。
<input
type="checkbox"
checked={onlyFavorites}
onChange={(event) => setOnlyFavorites(event.target.checked)}
/>検索でしぼりこむ
入力値がstateにあるので、表示する配列を作り直すだけで検索になります。
const shownBirds = birds.filter(
(bird) => bird.name.includes(keyword) || bird.area.includes(keyword),
)そして一覧はbirdsではなくshownBirdsをmapします。
0件のときを忘れない
検索は何も見つからない状態が必ず起きます。前回の三項演算子の出番です。
{shownBirds.length === 0 ? (
<p className="mt-6 text-slate-500">みつかりませんでした。</p>
) : (
<div className="grid …">
{shownBirds.map((bird) => <BirdCard key={bird.id} bird={bird} />)}
</div>
)}「0件のときは何も出ない」は不具合に見えます。「みつかりませんでした」の一文があるだけで、使う人の不安がなくなります。
公式ドキュメントも見てみる
ja.react.dev外部サイトイベントへの応答 – React公式の「イベントへの応答」。「イベントハンドラを追加する」の節に、括弧を付けて渡してしまう間違いの解説がありますこのレッスンのまとめ
- イベントはキャメルケースの属性に関数を渡す（
onClick={handleClick}） - 括弧を付けると即実行。引数を渡したいときはアロー関数で包む
event.target.valueで入力値を取る——素のJavaScriptと同じ- 入力欄は
valueとonChangeをセットにしてstateに預ける（制御コンポーネント） - チェックボックスは
checkedとonChange - 絞りこんだ結果はstateにしない——元のデータと検索語から毎回計算する
- 0件のときの表示を必ず用意する
次は、いまカードの中に散らばっているお気に入りの状態を、親にまとめます。「お気に入りだけ見る」を作ろうとすると、いまの形では作れないことに気づく回です。
