クリアボタン
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 31/42。
制御された入力（controlled-input）の最大の強みはこれです。状態（state）がテキストを保持しているため、ユーザーだけでなく**あなたのコードも入力ボックス領域を変更できる**点です。どこからでもリセットできます：
<button onClick={() => setName('')}>Clear</button>ステートを空の文字列に設定すると、value={name} は常にステートを表示するため、次のレンダリング時にボックスが自動的に空になります。非制御インプットでは手動で DOM にアクセスすることになりますが、ステートを使えばセッターの呼び出し1回で済みます。
チャレンジ
中級メッセージ作成ツールを完成させましょう。
- 入力（
id="message"）をmessage状態（state）で制御（controlled）するようにします。 - 段落（
id="draft"）にドラフトを表示します：テキストDraft:の後にメッセージを続けます。 id="clear"ボタンはメッセージを空にします。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。