ボタンでReduxフォームを制御する

Question

Redux-formを使用して作業しています。 フォームコンテナ内のこのフォーム。 フォームコンテナまたはフォームコンポーネント内。 2つのボタンがあります。追加ボタンと減算ボタン。 フォームコンポーネントは次のとおりです。今

import React from 'react' 
import { Field, reduxForm } from 'redux-form' 
import TextField from 'material-ui/TextField' 
import RaisedButton from 'material-ui/RaisedButton' 

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
    <TextField hintText={label} 
       floatingLabelText={label} 
       errorText={touched && error} 
       {...input} 
       {...custom} 
    /> 
) 

const ActivityDetailForm = props => { 
    const { handleSubmit, pristine, reset, submitting,} = props 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <RaisedButton 
      type="submit" 
      disabled={pristine || submitting} 
      label="saveChange" 
      fullWidth={true} 
      secondary={true} 
      /> 
     </div> 
     </form> 
) 
} 

export default reduxForm({ 
    form: 'ActivityDetailForm', // a unique identifier for this form 
})(ActivityDetailForm) 

、私は問題に直面しています。追加ボタンをクリックすると、form要素に上記のコードが作成されます。追加ボタンをクリックすると、form要素に上記のコードが作成されます。

私は再び追加ボタンをクリックすると、field2という名前Fieldが含まdiv要素がform要素に作成されます。

... field3 という名前Field ... field4 という名前Field ... field5 という名前Field ... 私は減算]ボタンをクリックしてください。最後のField要素は破壊されます。

この問題を解決する方法をご存知ですか？

Answer 1

次の（テストされていない）は、FieldArrayで動的入力を達成する方法に関するかなり基本的な例です。特定のシナリオに合わせて調整するには、少し調整する必要があります。

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
    <TextField hintText={label} 
       floatingLabelText={label} 
       errorText={touched && error} 
       {...input} 
       {...custom} 
    /> 
) 

const ActivityDetailForm = props => { 
    const { handleSubmit, pristine, reset, submitting,} = props 

    const renderFieldArray = ({ fields }) => (
    <div> 
     <div> 
     <RaisedButton 
      onTouchTap={() => fields.push({})} 
      label="Add" 
     /> 
     </div> 
     {fields.map((field, index) => (
     <div> 
      <div key={index}> 
      <Field 
       name={`${field}.name`} 
       label={`Text ${index + 1}`} 
       component={renderTextField} 
      /> 
      </div> 
      <div> 
      <RaisedButton 
       onTouchTap={() => fields.remove(index)} 
       label="Remove" 
      /> 
      </div> 
     </div> 
    ))} 
    </div> 
); 

    return (
    <form onSubmit={handleSubmit}> 
     <div> 
     <FieldArray 
      name="textFields" 
      component={renderFieldArray} 
     /> 

     <RaisedButton 
      type="submit" 
      disabled={pristine || submitting} 
      label="saveChange" 
      fullWidth={true} 
      secondary={true} 
     /> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'ActivityDetailForm', // a unique identifier for this form 
})(ActivityDetailForm)