用按钮控制 Redux-form

Question

我正在使用Redux-form 执行任务。 此表单位于表单容器中。 在表单容器或表单组件中。 有两个按钮。一个加法按钮和一个减法按钮。 表单组件是：

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)

现在，我面临一个问题。当我点击添加按钮时，

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

上面的代码将在form 元素中创建。

当我再次单击添加按钮时，将在form 元素中创建包含名为Field 的div 元素field2。

...Field 命名为 field3 ... Field 命名为 field4 ... Field 命名为 field5 ... 当我单击减法按钮时。最后一个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)