ボタンクリックによるフォームデータ処理 in React
前のレッスンでは、入力フィールドに文字を入力するたびに、 段落に結果が即座に表示されるようにしていました。 これは確かに見栄えが良いですが、欠点があります。
例えば、重くてリソースを消費する操作が必要な場合を想像してみてください。 すべての文字入力ごとにこの操作を行うのはあまり最適ではありません。 データ入力を完了するまで待ち、その後必要な操作を一度だけ実行し、 結果を段落に表示する方が良いでしょう。
このために、クリックするとリソースを消費する操作を実行するボタンを導入する必要があります。 この場合、各入力フィールドには再びそれぞれの状態(state)が対応し、 さらに、操作結果を記録して画面に表示するための状態(state)がもう一つ必要です。
例を見てみましょう。2つの入力フィールドとボタンがあるとします。 ボタンをクリックしたときに、入力フィールドに入力された数値の合計を求めてみましょう。
実装してみます：
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
短縮版も使用できます：
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
2つの入力フィールド、2つのボタン、1つの段落があります。 入力フィールドには数値が入力されるとします。 最初のボタンをクリックしたときに数値の合計を求め、 2番目のボタンをクリックしたときに数値の積を求めてください。 結果は段落に出力してください。
2つの入力フィールド、1つのボタン、1つの段落があります。 入力フィールドには 2025-12-31 形式の日付が入力されるとします。 ボタンをクリックしたときに、日付間の差を日数で求め、結果を段落に出力してください。
前の問題を修正して、デフォルトで入力フィールドに現在の日付が設定されるようにしてください。
入力フィールドと段落があります。入力フィールドには数値が入力されます。 フォーカスが外れたときに、入力された数値の各桁の合計を段落に出力してください。
入力フィールドと段落があります。入力フィールドには数値が入力されます。 フォーカスが外れたときに、入力された数値の約数の積を段落に出力してください。
