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のマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

CSS ワールド - コード実践: 画像の Alt 情報の表示

ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...

Linux サーバーでの MySQL インストール情報の表示

mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...

Vueデータ割り当て問題の解決

私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...

動的なデジタル時計を実装するJavaScript

この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

CentOS7 デプロイメント Flask (Apache、mod_wsgi、Python36、venv)

1. Apacheをインストールする # yum インストール -y httpd httpd-de...

vue.js を使用してドラッグ アンド ドロップ機能を実装する方法

序文ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Dockerコンテナのデータを復元する方法

プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...

CSS3 オーバーフロープロパティの説明

1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...