如何使用 Redux-Form v6 制作可重用的表单组件组？

Question

我正在尝试制作一个可重用的表单组件组（部分？）以与 Redux-Form v6 一起使用。理想情况下，我不希望它知道它在表单中的位置，以便我可以在表单中的任何地方（在根或嵌套）使用它。我该怎么做？

例如，我有一个 Address 组件，它使用 Redux-Form 的 Field 作为地址 1、城市、州、邮政编码等，如下所示：

class Address extends React.Component {
  render() {
    return (
      <Field
        component={MyReduxFormInput}
        name="address1" // <== How to name for generic case?
      />
    )
  }
}

这是一个简化的 MyReduxFormInput:

module.exports = field => {
  return <input {...field.input} />
}

我正在创建一个表单，我需要在其中收集用户的地址，以及一些专业参考资料中的多个地址。因此，我想在根目录中使用 Address 一次，然后以嵌套方式多次使用。诀窍是，我不能像上面写的那样简单地使用 Address，因为虽然它适用于根地址，但不适用于嵌套情况。如 FieldArray example docs 所示，提供给 Field 的 name 需要是 name={`${member}.address1`}。但这在根本上是行不通的。

我刚刚想到的一个想法是 Address 组件采用 member 参数，该参数在根部为空白。我会尝试并报告回来。但我在想 Redux-Form Field 组件会自动知道它们的嵌套级别；他们应该查找他们的层次结构并能够知道他们必要的 name 前缀。

Answer 1

我认为我的组件采用 member 道具（例如，取决于嵌套的名称前缀）效果很好。真希望我在很多小时前就想到了。

这是 Address 的样子：

class Address extends React.Component {
  static propTypes = {
    member: PropTypes.string
  }

  static defaultProps = {
    member: ''
  }

  render() {
    const { member } = this.props
    const name = n => `${member}${n}`

    return (
      <Field
        component={MyReduxFormInput}
        name={name('address1')}
      />
    )
  }
}

下面是它的用法：

const references = ({ fields }) => {
  return (
    <div>
      fields.map((member, index) => {
        return <Address member={member} key={index} />
      })
    </div>
  )
}

<Address />
<FieldArray name="professionalReferences" component={references} />

如何使用 Redux-Form v6 制作可重用的表单组件组？

How do I make a reusable form component group with Redux-Form v6?

redux-form