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元素中创建。

当我再次点击添加按钮时，将在div元素中创建包含名为Field的{{1}}的{{1}}元素。

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

使用按钮控制Redux表单

1 个答案: