この文章はMZ's Develogに移った。

💡 中に入る。

ベロフトとのモダン反応の入力ステータスの管理と複数の入力ステータスの管理を読み、整理しました.
Inputの管理方法,不変性の維持方法,および複数のinputオブジェクトとしての管理方法についてまとめた.
ユーザーから名前とニックネームを入力する例を使用します.

📝 useStateの概念

コンポーネントが表示する必要があるコンテンツをユーザーによってインタラクティブに変更する必要がある場合は、usStateを使用します.
Hooks機能を導入すると、機能要素もその状態を管理できます.
useStateは応答中のHooksです.

🎯 イベントの登録

イベントに登録された関数は、イベントオブジェクトeをパラメータとして受信することができる.
このオブジェクトのe.targetは、イベントが発生したDOM Input DOMを指します.
このDOMの値、すなわちe.target.valueをクエリーすると、現在のinputに入力した値が表示されます.
値のInputSample要素を入力して理解しましょう.

🔎 InputSample.js Code

e.target.valueを使用してinput値にアクセスした後、setTextでテキスト値を更新しました.

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

💻 実行結果

入力した値は、値:{text}セクションに表示されます.

......

新しい号では、記事のすべてを表示できます。