Question

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

例如，我有一个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} />
}

我正在创建一个表单，我需要收集用户的地址，以及来自某些专业参考的多个地址。所以，我希望在root用户使用Address一次，并以嵌套方式多次使用Address。诀窍是，我不能像我上面写的那样简单地使用name，因为虽然这对于根地址有效，但它不适用于嵌套情况。如FieldArray example docs所示，提供给Field的{{1}}必须为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创建可重用的表单组件组？

1 个答案: