React の入力フィールドの値を取得する

1. React での入力の仕組み
2. React 16 で入力フィールドの値を取得する
3. フックを使用して React の入力フィールドの値を取得する
4. 数十の入力を持つ大きなフォームを処理する方法

ユーザー入力の処理は、動的 React アプリケーションを開発するための鍵の 1つです。ユーザー入力を操作することで、ユーザーのアクションに対応し、優れたユーザーエクスペリエンスを提供できます。

React で作業するときは、ユーザー入力を状態プロパティに格納して、信頼できる唯一の情報源を確立することをお勧めします。これにより、データを簡単に操作し、必要に応じて操作できます。

状態が変化するたびに、React は最新の変更を反映するようにコンポーネントを自動的に更新します。

React での入力の仕組み

先に進む前に、React がコンポーネントの再レンダリングを決定する時期と理由を理解する必要があります。

まず、内部状態が変化すると、アプリケーション UI が更新（再レンダリング）されます。別のオプションの選択やフィールドのチェック/チェック解除などのユーザーイベントは、状態を変更して再レンダリングを引き起こす可能性があります。

次に、親から受け取ったコンポーネントの props の変更時に再レンダリングが行われます。場合によっては、親コンポーネントはその状態から prop 値を提供します。

React は HTML によく似た JSX を使用しますが、機能が異なります。

JSX で <input> 要素を作成するときは、HTML の <input> 要素ではなく、それによく似た React input オブジェクトを作成することに注意してください。HTML の input 要素と同様にレンダリングされ、イベント処理インターフェイスを模倣しますが、それ以外は独立しています。

React アプリケーションは、コンポーネントの状態から値を取得する UI 要素で構成されています。前述のように、入力の変更は、状態を変更する最も一般的な方法の 1つであり、ひいては、ページにレンダリングされる視覚要素です。

ただし、覚えておくべき重要なことは、状態が React アプリケーションの唯一の正しい情報源であるということです。UI インターフェイスには 2 番目の役割があります。

React 16 で入力フィールドの値を取得する

React 16 のリリース以降、開発者は読み取り可能なクラス構文を使用して React クラスコンポーネントを作成できます。以下の例のように、イベントハンドラーが機能するには、コンストラクター関数でそれらをバインドするか、矢印構文を使用してそれらを呼び出す必要があることに注意してください。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

一般に、矢印構文を使用する方が読みやすく便利です。また、アプリケーションのデバッグも容易になります。

プレイコードを自分でチェックアウトして、入力フィールドに新しいものを入力するたびに（デモ目的で）状態値が更新されてコンソールに記録されることを確認できます。

フックを使用して React の入力フィールドの値を取得する

機能コンポーネントは、クラスコンポーネントよりも書き込みと読み取りがさらに簡単です。このタイプのコンポーネントは、引数として props を受け入れる単なる関数です。

数年前まで、機能コンポーネントはステートレスまたはダムコンポーネントとも呼ばれ、主にデータの視覚化に使用されていました。

React 16.8 以降、機能コンポーネントはフックを含む多くの新機能にアクセスできるようになりました。これで、開発者は useState() フックを使用して、機能コンポーネントの状態を維持できます。

このフックを使用すると、1つの状態変数とそれを更新する関数を取得できます。機能コンポーネントで .setState() API を直接使用する必要はなくなりました。

機能コンポーネントを使用して構築された場合、同じアプリケーションは次のようになります。

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

useState() フックは非常に簡単な方法で機能します。呼び出されると、inputValue に割り当てられた状態変数とそれを更新する関数を返します。

各変数を更新するための個別の機能を持つことは、読みやすさの観点から有益な場合があります。ご覧のとおり、setInputValue にはかなりわかりやすい名前が付いています。

useState() フック（空の文字列）に渡された引数は、inputValue 状態変数の初期値として使用されます。

ご覧のとおり、この定義ははるかにクリーンで、クラスコンポーネントと同じように機能します。状態値を格納するための変数がいくつかあるコンポーネントが必要な場合は、通常、機能コンポーネントの方が適しています。

それでも、場合によっては、クラスコンポーネントが必要であり、機能コンポーネントとは異なります。違いの詳細については、公式の React ドキュメントをお読みください。

数十の入力を持つ大きなフォームを処理する方法

前に述べたように、ユーザーが入力した値を保持するには、すべての UI 入力要素に状態変数が必要です。フォームに数十、さらには数百の入力があることは珍しいことではありません。それらすべてに対して個別の状態変数を作成する必要がありますか？

解決策はシンプルで、React の全体的なロジックと一致しています。これらの入力を 1つの大きなコンポーネントに含めるのではなく、個別の小さなコンポーネントを作成して、論理的に接続された部分に分割する必要があります。

次に、それらをインポートして使用し、大きなフォームを作成できます。このように、小さなコンポーネントは、いくつかの入力の保存と維持にのみ責任があります。

このように構成されたアプリは、読みやすく、保守も簡単です。あなたのコードに取り組んでいる他の開発者は、シンプルで理解しやすいコードを書いてくれてありがとう。