Steuern Sie das Redux-Formular mit der Schaltfläche

Question

Ich verwende die Redux-form, um eine Aufgabe zu erledigen. Dieses Formular in einem Formcontainer. Im Formularbehälter oder in der Formularkomponente. Es gibt zwei Tasten. Ein Hinzufügen-Button und ein Subtrahieren-Button. Die Formularkomponente ist:

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) 

Nun stehe ich vor einem Problem. Wenn ich auf die Schaltfläche Hinzufügen klicken,

<div> 
     <Field name="field1" component={renderTextField} label="text1: "/> 
    </div> 

der obige Code wird in dem form Element angelegt werden.

Wenn ich auf die Schaltfläche Hinzufügen erneut auf, das div Element, das die field2Field genannt umfasst wird im form Elemente angelegt werden.

... Fieldfield3 genannt ... Fieldfield4 genannt ... Fieldfield5 namens ... Wenn ich die Taste subtrahieren klicken. Das letzte Field Element wird zerstört.

Kennen Sie die Methode, um dieses Problem zu lösen?

Answer 1

Das folgende (ungetested) ist ein ziemlich einfaches Beispiel dafür, wie dynamische Eingaben mit einem FieldArray erreicht werden können. Sie müssten dies ein wenig anpassen, um es an Ihr spezifisches Szenario anzupassen.

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)