REDUXフォームを動的に構築する方法 -- reactjs フィールド と react-redux フィールド と redux-form フィールド 関連 問題

How to dynamically build a redux form?












3
vote

問題

日本語

Redux形式を動的に構築する方法を学びたいです。 IDEN、ComponentDidMountが呼び出されるコンポーネントは、サーバーからアイテムのリストを取得し、それらをストアに挿入します。

<事前> <コード> {'item1', 'itemB', 'itemZZZ', etc...}

これらの項目がストア内にあるので、Store.My_Itemsの各項目のフィールドをredux形式で構築します。

例、これらのいくつかは動的に作成されたもの:

<事前> <コード> <div> <label>ItemXXX</label> <div> <label> <Field name="ItemXXX" component="input" type="radio" value="1" /> {' '} 1 </label> <label> <Field name="ItemXXX" component="input" type="radio" value="2" /> {' '} 2 </label> </div> </div>

React、Redux形式、このタイプのダイナミックREDUXフォームを構築する正しい方法は?

ありがとう

英語

I'm looking to learn how to dynamically build a redux-form. Idea being, the component called, componentDidMount goes at fetches a list of items from the server and inserts them in the store, store.my_items:

{'item1', 'itemB', 'itemZZZ', etc...}  

Now that these items are in the store, I want to build the redux-form with a Field for each item in store.my_items.

Example, several of these dynamically created:

      <div>         <label>ItemXXX</label>         <div>           <label>             <Field name="ItemXXX" component="input" type="radio" value="1" />             {' '}             1           </label>           <label>             <Field name="ItemXXX" component="input" type="radio" value="2" />             {' '}             2           </label>         </div>       </div> 

With react, redux-form, what would be the right way to approach building this type of dynamic redux form?

Thank you

</div
        

回答リスト

5
 
vote
vote
ベストアンサー
 

私は動的にフォームを構築するためのこのアプローチを続けています。私は(タイプ、プレースホルダー、各フィールドの固有名など)のメタデータを宣言しています。

<事前> <コード> const fields = [ { name: 'name', type: 'text', placeholder: 'Enter Name' }, { name: 'age', type: 'number', placeholder: 'Enter age' }, { name: 'email', type: 'email', placeholder: 'Enter Email' }, { name: 'employed', type: 'checkbox' }, { name: 'favouriteColors', type: 'select', options: [ { label: 'Red', value: 'red' }, { label: 'Yellow', value: 'yellow' }, { label: 'Green', value: 'green' }, ], }, ]

今、私はこれらの分野を繰り返し、私が下記の renderfield コンポーネントで行った方法のように各フィールドの入力をレンダリングするだけです。私の一般的なフォームコンポーネントは次のようになります:

<事前> <コード> import React from 'react' import { Field, reduxForm } from 'redux-form/immutable' const renderField = ({ input, field }) => { const { type, placeholder } = field if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') { return <input {...input} placeholder={placeholder} type={type} /> } else if (type === 'select') { const { options } = field return ( <select name={field.name} onChange={input.onChange}> {options.map((option, index) => { return <option key={index} value={option.value}>{option.label}</option> })} </select> ) } else { return <div>Type not supported.</div> } } const SimpleForm = ({ handleSubmit, fields }) => { return ( <div> {fields.map(field => ( <div key={field.name}> <Field name={field.name} component={renderField} field={field} /> </div> ))} <div onClick={handleSubmit}>Submit</div> </div> ) } export default reduxForm({ form: 'simpleForm' })(SimpleForm)

と渡すフィールドをこのようなSimpleFormコンポーネントへの渡し:

<事前> <コード> <SimpleForm fields={fields} onSubmit={() =>{}}/>

今すぐあなたがサーバーからこのようなフィールドを取得するか、アイテムのみを取得し、そのようなフィールドを(項目の名前として項目を渡すことによって)をフロントエンドに渡すことによって、あなたが選択してください。

このアプローチを使用することによって、私は与えられたタイプに基づいてテンプレートを再利用することができます。

誰かが動的にフォームを作るためのより良いアプローチを持っているならば、私はそれを学ぶのが大好きだ。

編集: フォーム名を動的に渡す必要がある場合は、小さな変更が必要になります。

<事前> <コード> export default reduxForm({})(SimpleForm)

とこのコンポーネントのようにフォーム名を渡すことができます。

<事前> <コード> ClientIDMode="Static"0
 

I am following this approach for building a form dynamically. I am just declaring metadata of form fields (type, placeholder, the unique name of each field, etc.) like this:

const fields = [       { name: 'name', type: 'text', placeholder: 'Enter Name' },       { name: 'age', type: 'number', placeholder: 'Enter age' },       { name: 'email', type: 'email', placeholder: 'Enter Email' },       { name: 'employed', type: 'checkbox' },       {         name: 'favouriteColors',         type: 'select',         options: [           { label: 'Red', value: 'red' },           { label: 'Yellow', value: 'yellow' },           { label: 'Green', value: 'green' },         ],       },     ] 

Now, I am just iterating over these fields and rendering input for each field like the way I have done in renderField component given below. My general form component looks like this:

import React from 'react' import { Field, reduxForm } from 'redux-form/immutable'  const renderField = ({ input, field }) => {   const { type, placeholder } = field   if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {     return <input {...input} placeholder={placeholder} type={type} />   } else if (type === 'select') {     const { options } = field     return (       <select name={field.name} onChange={input.onChange}>         {options.map((option, index) => {           return <option key={index} value={option.value}>{option.label}</option>         })}       </select>     )   } else {     return <div>Type not supported.</div>   } }  const SimpleForm = ({ handleSubmit, fields }) => {   return (     <div>       {fields.map(field => (         <div key={field.name}>           <Field             name={field.name}             component={renderField}             field={field}             />         </div>       ))}       <div onClick={handleSubmit}>Submit</div>     </div>   ) }  export default reduxForm({   form: 'simpleForm' })(SimpleForm) 

and passing fields to SimpleForm component like this:

<SimpleForm fields={fields} onSubmit={() =>{}}/> 

Now it's your choice that you want to fetch fields like this from the server or just want to fetch only items and make fields like this (by passing item as the name of field) on the frontend.

By using this approach, I am able to re-use template based on given type.

If someone has a better approach to make a form dynamically, then I would love to learn that too.

Edit: If we have to pass form name dynamically, then a small change will be required:

export default reduxForm({})(SimpleForm) 

and we can pass form name while this component like this:

<SimpleForm form={'simpleForm'} fields={fields} onSubmit={() =>{}} /> 
</div
 
 
         
         
1
 
vote

コンポーネントフォームを作成して ClientIDMode="Static"1 関数で使用して、このような小道具としてFormNameを渡すことができます...

<事前> <コード> ClientIDMode="Static"2

注意:INITのinit init viredの場合は、すべてのフィールド名がデータと等しくなる必要があります。

 

you can create a component form and use it in a .map() function and pass formName as props like this...

render() {  return(    <div>      {yourDataFromServer.map((item, index) =>        <ReduxFormComp         form={`${FORM_NAMES.SIMPLE_FORM}__${index}`}         initialValues={item}       />     )}    </div> ); } 

NOTE: when you use from initialValues for init your form, all field name should equal to your data.

</div
 
 
   
   

関連する質問

0  REDUXフォームにマルチ入力フィールドを持つのが良い方法は何ですか?  ( What is the good way to have a multi input field in redux form ) 
私のプロジェクトでは、 React と Redux-Form を使ってフォームを構築しています。 2つの入力の値で構成されている単一の情報があります。ただし、各入力の値は組み合わされて検証されます。 最初の実装試行は、各コンポーネントを Field に接続す...

3  JavaScript関数をインライン化することによる予想外に異なる行動  ( Unexpectedly different behaviour from inlining javascript function ) 
JavaScript関数をインライン化した後にさまざまな動作を見ていて、理由がわかりません。 検討: <事前> <コード> const someFunc = someParam1 => someParam2 => { // doSomething } ...

2  動的にラジオボタンを生成します  ( Dynamically generate radio buttons ) 
私はいくつかのラジオボタンを含んでいたReduxフォームを持っています: <事前> <コード> <label htmlFor="passType">Pass type</label> {passType.touched && pass...

5  REDUX形式でONBLURを使用してください  ( Using onblur with redux form ) 
Redux-Form 7.0.4を使用していますが、以下の問題以外の機能上です。 新規ユーザーは詳細を入力して既存のユーザーが同じ形式で詳細を編集できます。私は既存のユーザーの詳細を編集してフォームフィールドからデータを削除するときに問題があります。チェッ...

16  Redux-Form:送信ボタンを無効にする方法少なくとも1つのフィールドが無効な場合は?  ( Redux form how to disable submit button if at least one field is not valid ) 
Redux-Formを使って以下の簡単なフォームをレンダリングしています。今、もう1つの状況でSubmitボタンを無効にしたいと思います。 applications-test.properties29 のいずれかにエラーがある場合(つまり、<コード> Cau...

0  材料-UI v3~V4のアップグレードにより、REDUXフォームフィールドコンポーネントエラー「無効なプロップコンポーネント」  ( Upgrading material ui v3 to v4 causes redux form field component error invalid ) 
material-ui v3からv4 へのアップグレード後、prop component を含むすべてのマイ<コード> <Field> コンポーネントに対して次のエラーが発生します。 エラー: 警告:故障したProP型:無効なProp <コード> c...

0  Redux-Form Dispatch Callsアクション作成者が呼び出しますが、削減者はアクションを受信しません  ( Redux form dispatch calls action creator but the reducer never receives action ) 
以下の例では、<コード> mapDispatchToProps を使用して onSubmit イベントを save() Action Creatorにバインドしています。この機能 - <コード> save() Action Creatorはメッセージをコ...

1  このコード内の最後のフォーム項目のアイコンを設定しない方法は?  ( How to not set an icon for the last form item inside this code ) 
フォーム検証のためにredux形式を使用しています。 RenderInput内部には多くの入力があり、各入力は独自のアイコンを持っていますが、Date2 input.nameをアイコンなしで使用する必要があります。残念ながら、それらのうちの誰も働いていない間は...

0  Redux用語でGoogleマップ  ( Google maps in redux form ) 
REDUXフォームを使用してLATとLONGを取得するには、Googleマップを使用します。私はこれを作成します: <事前> <コード> import React from 'react'; import { compose, withProps, life...

10  MapStateTopropsとReduxフォームをエクスポートする方法  ( How to export mapstatetoprops and redux form ) 
ログインページにREDUXフォーム(6)を使用しています。ユーザーがフォームに記入して送信をクリックし、私の状態からテキストをつかみ、その電子メールとパスワードでアクションをディスパッチすることができるようにすることができるようにすることです。ただし、Reac...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有