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

'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)をエクスポートします。 

...
与える（）{
    フォームのプロパティを宣言します。
    フォームにフィールドデコレータを追加します。
...
    戻る （
      <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>
    ）
}
... 

...
クラス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",
        ペイロード: {
          値: 値、
        }
      });
 
    });
  };
...
}
...