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> ) } ...
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: nginx+php実行リクエストの動作原理の詳細な説明
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...
mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...
私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...
v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...
最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...
目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...
1. Apacheをインストールする # yum インストール -y httpd httpd-de...
序文ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...
1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...
1. ダウンロード: http://www.oracle.com/technetwork/java/...
Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...