React は入力値を取得し、2 つのメソッドの例を送信します

React は入力値を取得し、2 つのメソッドの例を送信します

方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する

'react' から React をインポートします。
 
クラス InputDemo は React.Component を拡張します{
  状態 = {
    InputValue : "", //入力ボックスに入力した値};
 
  handleGetInputValue = (イベント) => {
    this.setState({
      入力値: イベントターゲット値、
    })
  };
 
  ハンドルポスト = () => {
    定数 {InputValue} = this.state;
    console.log(入力値、'------入力値');
    //ここで、ディスパッチの送信などの送信操作を実行します。};
 
  与える(){
    戻る(
      <div>
        <入力
          値={this.state.InputValue}
          onChange={this.handleGetInputValue}
        />
        <button onClick={this.handlePost}>送信</button>
      </div>
    )
  }
}
 
デフォルトの InputDemo をエクスポートします。

ここでの <input /> と <button /> はどちらも HTML タグです。もちろん、Antd の <Input /> および <Button /> コンポーネントを使用することもできます。その場合、内部の内容は変更されません。

まず、コンポーネント上部のstateにInputValue:"を定義し、下の<input />にvalue={this.state.InputValue}と記述します。onChangeイベントが削除されると、この時点では入力ボックスに何も入力できません。

React では、すべての状態は React の状態によって制御されるべきだと考えています。<input />、<textarea />、<select /> などの入力コントロールに値が設定されている限り、それらの値は常に設定された値に基づいて決まります。値が変更されていない場合は、値は変更されません。

React では、コンポーネントのコンテンツを更新するには setState が必要なので、入力ボックスの onChange イベントをリッスンして入力ボックスのコンテンツを取得し、setState を通じて状態の InputValue を更新する必要があります。そうすることで、<input /> のコンテンツがリアルタイムで更新されます。

DOM イベント オブジェクトのターゲット イベント属性を使用する onChange の handleGetInputValue メソッドについて説明します。

ターゲット イベント プロパティは、イベントを生成した要素、ドキュメント、ウィンドウなど、イベントのターゲット ノード (イベントをトリガーしたノード) を返します。

詳細については、W3C標準の概要を参照してください。

方法2: Reactのrefを使用してDOM要素にアクセスし、値を送信する

ステートレスコンポーネントの記述:

const InputDemo = () => {
  入力値を入力します。
  定数handlePost = (e) => {
    e.preventDefault() の場合;
    定数 valueTemp = 入力値.値;
    console.log(valueTemp, '------valueTemp');
    //ここで、ディスパッチの送信などの送信操作を実行します。};
 
  戻る (
    <div>
      <フォームonSubmit={handlePost}>
        <入力
          ref={入力 => 入力値 = 入力}
        />
        <button onClick={handlePost}>送信</button>
      </フォーム>
    </div>
  )
};
 
デフォルトの InputDemo をエクスポートします。

ステートフルコンポーネントの記述:

'react' から React をインポートします。
 
クラス InputDemo は React.Component を拡張します {
  ハンドルポスト = (e) => {
    e.preventDefault() の場合;
    定数 valueTemp = this.inputValue.value;
    console.log(valueTemp, '------valueTemp');
    //ここで、ディスパッチの送信などの送信操作を実行します。};
 
  与える() {
    戻る (
      <div>
        <フォームonSubmit={this.handlePost}>
          <入力
            ref={input => this.inputValue = 入力}
          />
          <button onClick={this.handlePost}>送信</button>
        </フォーム>
      </div>
    )
  }
};
 
デフォルトの InputDemo をエクスポートします。

Ref は、DOM 要素またはコンポーネント インスタンスに安全にアクセスするために React によって提供されるハンドルです。要素に ref 属性を追加し、コールバック関数で DOM ツリー内の要素のハンドルを受け入れることができます。このハンドルは、コールバック関数の最初のパラメーターとして返されます。

これら2つの記述方法に加えて、AntdのFormコンポーネントを使用してフォーム機能を実装することもできます。ポータル:ReactはAntdのFormコンポーネントを使用してフォーム機能を実装します

要約する

Reactで入力値を取得して送信する2つの方法についての記事はこれで終わりです。Reactで入力値を取得して送信することに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • antd をインストールした後、React で ''./locale'' を解決できない問題を解決する (推奨)
  • React は antd オンラインテーマの動的切り替えを実装します
  • Reactはantdオンデマンドロードの使用を設定します
  • create-react-app を使用して CSS モジュール、SASS、および ANTD を追加する詳細な説明
  • React は antd のアップロード コンポーネントを使用してファイル フォーム送信機能を実装します (完全なコード)

<<:  MySQL で URL タイムゾーンの罠を回避する方法

>>:  Nginx のインストールと設定ルールの詳細な紹介

推薦する

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

この記事はVueのライフサイクルを理解するのに役立ちます

目次1. beforeCreate & created 2. マウント前とマウント済み3. ...

Jsモジュール化の動作原理とソリューションの詳細な説明

目次1. モジュラーコンセプト2. モジュール化3. モジュール化プロセス1. 通常の記述(グローバ...

Vue のミックスインの使用方法の詳細な説明

目次序文1. Mixin とは何ですか? 2. Mixin はいつ使用すればよいですか? 3. Mi...

MySQL パフォーマンスの包括的な最適化方法リファレンス、CPU、ファイルシステムの選択から mysql.cnf パラメータの最適化まで

この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...

Linux で killall コマンドを使用してプロセスを終了する 8 つの例

Linux コマンドラインには、プロセスを強制終了するためのコマンドが多数用意されています。たとえば...

MySQLデータベース移行におけるデータ文字化けの問題を解決する

リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...

MySQL データ挿入最適化メソッドconcurrent_insert

スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...

Dockerを使用してコンテナリソースを制限する方法

覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

PCとモバイルの適応の問題に対する迅速な解決策

Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

ボタンをクリックした後のCSS読み込み効果を実現する

自社製品にクリック後1~2秒待機時間があるボタン(確認メールを送信する)があるため、クリック後の1~...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...