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実行リクエストの動作原理の詳細な説明
序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...
問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...
多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...
序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...
序文フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実...
目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...
目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...
1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...
目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...
目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...
SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...