Reactにおける状態のリアクティビティ

では、リアクティビティがどのように機能するかを見てみましょう。リアクティビティにより、状態が変更されると変更が即座に画面に反映されます。

例を見てみましょう。製品名を持つ状態があるとします：

const [name, setName] = useState('prod');

マークアップに製品名を表示しましょう：

return <div>
	<span>{name}</span>
</div>;

次に、クリックすると状態が変化するボタンを作成しましょう：

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

クリックハンドラーでは、関数setNameを使用して製品に新しい名前を設定します：

function clickHandler() {
	setName('xxxx');
}

すべてのコードをまとめます。すると、ボタンをクリックした後、テキストは即座に新しい値に変わります：

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

個別のハンドラー関数を使用する必要はありません。匿名のアロー関数を使用できます：

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

ユーザーの名と姓を持つ状態が与えられています。これらをマークアップに表示してください。これらの状態を変更するためのボタンを作成してください。