ボタンクリックによるフォームデータ処理 in React

前のレッスンでは、入力フィールドに文字を入力するたびに、 段落に結果が即座に表示されるようにしていました。 これは確かに見栄えが良いですが、欠点があります。

例えば、重くてリソースを消費する操作が必要な場合を想像してみてください。 すべての文字入力ごとにこの操作を行うのはあまり最適ではありません。 データ入力を完了するまで待ち、その後必要な操作を一度だけ実行し、 結果を段落に表示する方が良いでしょう。

このために、クリックするとリソースを消費する操作を実行するボタンを導入する必要があります。 この場合、各入力フィールドには再びそれぞれの状態(state)が対応し、 さらに、操作結果を記録して画面に表示するための状態(state)がもう一つ必要です。

例を見てみましょう。2つの入力フィールドとボタンがあるとします。 ボタンをクリックしたときに、入力フィールドに入力された数値の合計を求めてみましょう。

実装してみます：

jsxfunction 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>;
}

短縮版も使用できます：

jsxfunction 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>;
}