ReactJS を使用して入力フィールドの値を取得するにはどうすればよいでしょうか? 質問する

ここでは、使用している（または使用しなければならない）React のバージョンと、フックを使用するかどうかに応じて、3 つの答えがあります。

まず最初に:

Reactがどのように動作するかを理解することは重要です。そうすれば、適切に作業を行うことができます（ヒント：実行してみる価値は十分にあります）ReactチュートリアルReact の Web サイトにあります。よく書かれていて、実際にやり方を説明する形ですべての基本事項を網羅しています。ここでの「適切に」とは、Web ページを書いているのではなく、ブラウザーでレンダリングされるアプリケーションのユーザー インターフェイスを書いているということです。実際のユーザー インターフェイスの作業はすべて React で行われ、「Web ページを書くときに慣れているもの」では行われません (これが、React アプリが実際には「アプリ」であり、「Web ページ」ではない理由です)。

React アプリケーションは、次の 2 つの要素に基づいてレンダリングされます。

1. コンポーネントのプロパティは、そのコンポーネントのインスタンスを作成する親によって宣言され、親はライフサイクルを通じてそれを変更できます。
2. コンポーネント自身の内部状態。コンポーネント自身のライフサイクルを通じて、それを変更することができます。

React を使用するときに明示的に行っていないことは<input>、HTML 要素を生成してそれを使用することです。たとえば、React に を使用するように指示すると、HTML 入力要素が作成されるのではなく、React アプリを Web 用にコンパイルしたときに HTML 入力要素としてレンダリングされる React 入力オブジェクトを作成するように React に指示し、イベント処理は React によって制御されます。

React を使用する場合、ユーザーに (多くの場合は操作可能な) データを提示するアプリケーション UI 要素を生成し、ユーザーの操作によって定義した方法でアプリケーションの状態を変更します。ユーザーが実行したアクションによってコンポーネントのプロパティまたは状態が更新され、React はそれをシグナルとして使用して変更されたコンポーネントの新しい UI 表現を生成します。これにより、アプリケーション インターフェイスの一部が更新され、新しい状態が反映されることがあります。

このプログラミング モデルでは、アプリの内部状態が最終的な権限であり、「ユーザーが見て操作する UI」ではありません。ユーザーが入力フィールドに何かを入力しようとしても、それを処理するための記述がなければ何も起こりません。UI はアプリケーションの状態を反映したもので、その逆ではありません。事実上、このプログラミング モデルでは、ブラウザー DOM はほとんど後付けです。ブラウザー DOM は、地球全体がアクセスできることがほぼ保証されている非常に便利な UI フレームワークです (ただし、React が使用できるのはブラウザー DOM だけではありません)。

具体例

では、ここまでの説明を踏まえて、React でユーザーが入力要素と対話する仕組みを見てみましょう。まず、ユーザーが対話するための UI 要素を用意する必要があります。

1. onChangeユーザー データを処理する関数を使用して、ユーザー向けの文字列データを管理 (つまり、保存と表示の両方) するコンポーネントを作成しました。
2. コンポーネントのレンダリング コードは、React によってコンポーネントinput(DOM<input>要素ではない) を含む仮想 DOM を生成するために使用され、onChangeハンドラーをそのコンポーネントにバインドして、React イベント データで呼び出すことができるようにします (したがって、これは DOMchangeイベント リスナーではなく、通常の DOM イベント リスナーと同じイベント データを取得しないことに注意してください)。
3. 次に、React ライブラリは仮想 DOM をユーザーが操作できる UI に変換し、アプリケーションの状態が変化すると更新されます。ブラウザで実行されるため、HTML 入力要素を構築します。

次に、ユーザーは実際にその入力要素を操作しようとします。

1. ユーザーは入力要素をクリックして入力を開始します。
2. 入力要素にはまだ何も起こりません。代わりに、入力イベントは React によってインターセプトされ、すぐに終了します。
3. React はブラウザ イベントを React イベントに変換し、onChangeReact イベント データを使用して仮想 DOM コンポーネントの関数を呼び出します。
4. その関数は、その記述方法に基づいて何かを実行する可能性があります。この場合、ユーザーが入力した内容 (しようとした内容) に基づいてコンポーネントの状態を更新するために記述されたことはほぼ間違いありません。
5. 状態の更新がスケジュールされると、React は近い将来にその状態の更新を実行し、更新後にレンダリング パスをトリガーします。
6. レンダリング パス中に、状態が実際に異なるかどうかを確認し、異なる場合は一時的な 2 番目の仮想 DOM を生成し、それをアプリケーションの仮想 DOM (の一部) と比較し、新しい一時的なものと同じに見えるようにアプリケーションの仮想 DOM で実行する必要がある追加/更新/削除操作のセットを決定し、それらの操作を適用して一時的な仮想 DOM を再度破棄します。
7. 次に、仮想 DOM の現在の外観を反映するように UI を更新します。
8. そして、これらすべてが完了すると、ユーザーが実際に見ているページの DOM が更新され、入力要素に入力した内容が表示されます。

したがって、これは通常のブラウザ モデルとはまったく異なります。ユーザーが最初にテキスト ボックスに入力して UI データを更新し、コードが「そのテキスト ボックスの現在の値」を読み取って次に状態を判断するのではなく、React は既に状態を認識しており、イベントを使用して最初に状態を更新し、次にUI を更新します。

そして、これらすべてが事実上瞬時に行われることを覚えておくことが重要です。そのため、ユーザーにとっては、任意の Web ページと同じように入力要素にテキストを入力したように見えますが、内部ではまったく異なる処理が行われていますが、結果は同じです。

さて、それでは、React の要素から値を取得する方法を見てみましょう。

コンポーネント クラスと ES6 (React 16+ および 15.5 移行)

React 16 (および 15.5 のソフト スタート) 以降、createClass呼び出しはサポートされなくなり、クラス構文を使用する必要があります。これにより、2 つの点が変更されます。明らかなクラス構文と、 "無料で" 実行できるthisコンテキスト バインディングです。そのため、引き続き機能するようにするには、ハンドラー内のコンテキストを保持する匿名関数createClassに "ファット アロー" 表記を使用していることを確認してください。次のコードで使用しているのがその例です。thisonWhateveronChange

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.reset();
  }

  reset() {
    // Always set the initial state in its own function, so that
    // you can trivially reset your components at any point.
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      // ...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      // ...
    );
  },

  updateInputValue(evt) {
    const val = evt.target.value;
    // ...       
    this.setState({
      inputValue: val
    });
  }
});

constructor(props) {
  super(props);
  this.handler = this.handler.bind(this);
  ...
}

render() {
  return (
    ...
    <element onclick={this.handler}/>
    ...
  );
}

import { useId, useState } from 'react';

function myFunctionalComponentFunction(props) {
  const id = useId();
  const [input, setInput] = useState(props?.value ?? '');
  return (
    <div>
    <label htmlFor={id}>Please specify:</label>
    <input id={id} value={input} onInput={e => setInput(e.target.value)}/>
    </div>
  );
}

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },

  updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",
      lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },
  componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },
  render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});