React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品

1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン メニュー、テキスト フィールドなどのフォーム フィールドが含まれている必要があります。

ここではまず、カプセル化されたフォームフィールド <Form.Item /> を参照します。

2. Form.create で処理されるフォームには、データを自動的に収集して検証する機能があります。ただし、この機能が必要ない場合、またはデフォルトの動作がビジネスニーズを満たせない場合は、Form.create を使用せずに自分でデータを処理することもできます。

Form.create() でラップされたコンポーネントには、独自の this.props.form プロパティがあります。this.props.form は、フォームとの双方向バインディングに使用される getFieldDecorator など、データを処理するための多くの API を提供します。詳細については、公式の Antd ドキュメントを参照してください。こちらをクリックして表示してください。

まずフォームのスタイルを表示します。

'react' から React をインポートします。
'antd' から {Form、Table、Button、Select、Input、DatePicker} をインポートします。
 
FormItem は Form.Item に代入されます。
const Option = Select.Option;
const {RangePicker} = DatePicker; //日付選択コントロールの日付範囲コントロールを取得します。クラス UserManage は React.Component を拡張します。
  与える() {
    定数列 = [
      {
        タイトル: 「連絡先」
        データインデックス: 'ユーザー名',
        キー: 'userName',
      }, {
        タイトル: 「携帯電話番号」
        データインデックス: 'モバイル',
        キー: 'モバイル'、
      }, {
        タイトル: '会社名'、
        データインデックス: 'companyName',
        キー: 'companyName',
      }, {
        タイトル: 「最新のアクティブ時間」
        データインデックス: 'lastOnlineTime',
        キー: 'lastOnlineTime'、
      }, {
        タイトル: 「ミュート状態」
        データインデックス: 'ステータス',
        キー: 'ステータス'、
      },
    ];
 
    戻る (
      <div>
        <フォームレイアウト="インライン" スタイル={{marginBottom: '10px'}}>
          <FormItem label="最終アクティブ時間">
            <RangePicker スタイル = {{width: '255px'}}/>
          </フォーム項目>
          <FormItem ラベル="ユーザー">
            <Input type="text" placeholder="会社名、携帯電話番号" style={{width: '155px'}}/>
          </フォーム項目>
          <FormItem label="ミュート状態">
            <defaultValue="All" style={{width: '155px'}} を選択>
              <Option value="All">すべて</Option>
              <オプション値="はい">はい</オプション>
              <Option value="No">いいえ</Option>
            </選択>
          </フォーム項目>
          <Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}>クエリ</Button>
          <Button style={{marginTop: '3px'}}>リセット</Button>
        </フォーム>
        <表
          columns={列}
        />
      </div>
    )
  }
}
 
デフォルトのForm.create()(UserManage)をエクスポートします。 

Columns は Table コンポーネントの API です。Columns と Column コンポーネントは同じ API を使用します。

dataIndex: データ項目内の列データに対応するキー。abcのネストされた書き込みをサポート

key: React に必要なキー。一意の dataIndex が設定されている場合、この属性は無視できます。

2. フォームインタラクションにgetFieldDecorator(id, options)を使用する

1. ここでの問題は、さまざまなクエリ条件のデータを取得する方法です。まず render() のコードを書き直し、getFieldDecorator を使用してフォームとの双方向バインディングを行います。

...
与える(){
    フォームのプロパティを宣言します。
    フォームにフィールドデコレータを追加します。
...
    戻る (
      <div>
        <フォーム onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最終アクティブ時間">
            {getFieldDecorator('lastOnlineTime')(<RangePicker スタイル={{width: '255px'}}/>)}
          </フォーム項目>
          <FormItem ラベル="ユーザー">
            {getFieldDecorator('userQueryLike')(<Input type="text" placeholder="会社名または携帯電話番号" style={{width: '155px'}}/>)}
          </フォーム項目>
          <FormItem label="ミュート状態">
            {getFieldDecorator('ステータス', {初期値: "すべて"})(
            <スタイルを選択={{width: '155px'}}>
              <Option value="0">すべて</Option>
              <オプション値="1">はい</オプション>
              <Option value="2">いいえ</Option>
            </選択>)}
          </フォーム項目>
          <Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}>クエリ</Button>
          <Button style={{marginTop: '3px'}}>リセット</Button>
        </フォーム>
        <表
          columns={列} /*dataSource={(モデルから取得したデータ)}*/
        />
      </div>
    )
}
... 

パラメータ例示するタイプデフォルト値
id必須の入力コントロールの固有フラグ。ネストされた書き込みをサポートします。
オプション.getValueFromEvent onChangeパラメータ(イベントなど)をコントロール値に変換できます関数(..引数)参照
オプション.初期値子ノードの初期値、型、オプション値はすべて子ノードによって決定されます(注: ===は内部検証時に変更されたかどうかを判断するために使用されるため、リテラルを直接使用するのではなく、設定する値をキャッシュする変数を使用することをお勧めします)
オプション.正規化デフォルト値をコントロールに変換する関数(値、前の値、すべての値): 任意-
オプション.ルール検証ルールの詳細については、Antdの公式ドキュメントを参照してください。物体[]
オプション.トリガー子ノードの値を収集するタイミング'onChange'
オプション.validateFirstルールのチェックに失敗した場合、残りのルールのチェックを停止する必要がありますか?ブール値間違い
オプション.validateTrigger子ノードの値をチェックするタイミング文字列|文字列[] 'onChange'
オプション.valuePropName子ノードの値属性(スイッチの場合は「checked」など)'価値'

2. 上記のフォームには onSubmit イベントが与えられ、フォームが送信されると handleQuery メソッドが実行されます。

...
クラスUserManageはReact.Componentを拡張します。
  //フォームクエリ handleQuery = (e) => {
    e.preventDefault() の場合;
    const {dispatch, form} = this.props;
    フォーム.validateFields((err, fieldsValue) => {
      (エラー) の場合、戻ります。
      //時間範囲の値を取得します。const rangeValue = fieldsValue['lastOnlineTime'];
      const userQueryLike = fieldsValue['userQueryLike'];
      //クエリ条件を取得するconst values ​​= {
        ...フィールド値、
        "lastOnlineTime": (rangeValue && rangeValue.length > 1) ?
          ([範囲値[0].format('YYYY-MM-DD'), 範囲値[1].format('YYYY-MM-DD')]) : null,
        "userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike,
      };
      急送({
        タイプ: "userManageModel/getUserList",
        ペイロード: {
          値: 値、
        }
      });
 
    });
  };
...
}
...

このメソッドでは、form.validateFieldsを呼び出して、入力フィールドの値とエラーのセットをチェックして取得します。入力パラメータfieldsValueは、フォームのFormItemから取得した値です。次に、fieldsValue['lastOnlineTime']の形式を使用して、先ほど記述したgetFieldDecorator('lastOnlineTime')とマッピングして、単一の入力フィールドの値を取得します。

まとめると、React の Form を使用してフォーム機能を実装するには、Form.create(component) を使用してラップされたコンポーネントに this.props.form プロパティを持たせ、フォームの getFieldDecorator メソッドと validateFields メソッドを呼び出せるようにする必要があります。getFieldDecorator の id は、validateFields の fieldsValue[''] に対応し、columns の dateIndex は、モデルから取得したデータ json 文字列のキー名に対応します。これを区別する必要があります。

この方法に加えて、入力ボックスの値を取得して送信する方法が他に2つあります。この記事を読むことができます:Reactは入力の値を取得し、2つの方法で送信します

要約する

これで、React が Ant の Form コンポーネントを使用してフォーム機能を実装する方法についての説明は終了です。React が Form コンポーネントを使用してフォーム コンテンツを実装する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactはantdフォーム割り当てを使用してポップアップボックスの操作を変更します
  • React antdはフォームの動的な増減を実現します

<<:  nginx+php実行リクエストの動作原理の詳細な説明

>>:  MySQL と接続関連のタイムアウトの詳細な概要

推薦する

MySQL のソート関数 field() の詳細な例

序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...

1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...

MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください

問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...

ウェブページ入力ボックスのスタイルトリガー効果

<br />この例では、主に onblur と onFocus という 2 つのパラメー...

js を使用して XML オンライン エディターを作成する例

目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...

HTML <!--...--> コメントタグの役割の詳細な分析

多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

JS を使用して配列内の要素の存在を 10 分で判断する

序文フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実...

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

JavaScript の BigIn 関数の共通プロパティをまとめます

目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...

HTMLの基礎を詳しく解説(第2部)

1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...

Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...