Question

在我的项目中，我们正在构建一个包含React和Redux-Form的表单。我们有一个由两个输入值组成的信息。但是每个输入的值被组合在一起并进行验证。

第一个实现尝试是将每个组件与Field连接起来。它让我们正确更新状态，但我们无法与validate道具一起验证所有值。

第二次尝试使用的是Fields组件，但它没有validate道具。我们考虑为它创建一个Pull请求，但它的API尚不清楚，因为我们要验证两个值的组合和Fields道具的行为（例如{{1} }和parse）不同，分别为format组件内的每个输入执行函数。

我知道可以创建一个组件并使用Fields来连接应用程序状态，但我不希望将事物管理为触摸的prop，或者更新状态或其他的回调。我甚至注意到的事情，因为Field完成了所有这些事情。

事实是我最终得到了一个实现，但它看起来并不优雅。我希望你看看实现并提出你的意见，采用其他解决方案，即使这个解决方案没有在Redux-Form中实现，但我们也许可以打开拉取请求。

以下是一个示例实现

简单表格容器

Redux-Form

简单表单组件

import SimpleForm from 'app/simpleForm/components/simpleForm'
import { reduxForm } from 'redux-form'

export default reduxForm({
  form: 'simpleForm'
})(SimpleForm)

MultiInputText组件

import React from 'react'
import { Field } from 'redux-form'
import MultiInputText from 'app/simpleForm/components/multiInputText'

const onSubmit = values => alert(JSON.stringify(values))

const validateAddress = (value) => {
  if (!value) return 'Address is empty'
  if (!value.street) return 'Street is empty'
  if (!value.number) return 'Number is empty'
  return null
}

const SimpleForm = ({ handleSubmit }) => {
  return (
    <form onSubmit={ handleSubmit(onSubmit) }>
      <Field label="Home Address" name="home" component={MultiInputText} type="text" validate={validateAddress}/>
      <Field label="Work Address" name="work" component={MultiInputText} type="text" validate={validateAddress}/>
      <button type="submit">Submit</button>
    </form>
  )
}

export default SimpleForm

Answer 1

我看到两个选项：

1）使用记录级验证。

reduxForm({
  form: 'addressForm',
  validate: values => {
    const errors = {}
    if(!home) {
      errors.home = 'Address is empty'
    }
    // etc, etc. Could reuse same code for home and work
    return errors
  }
})

2）创建一个处理复杂值的输入。

<Field name="home" component="AddressInput"/>

...

const AddressInput = ({ input, meta }) =>
  <div>
    <input
      name={`${input.name}.street`}
      value={(input.value && input.value.street) || ''}
      onChange={event => input.onChange({
        ...input.value,
        street: event.target.value
      })}/>
      ...other inputs here...
  </div>

这是完全伪代码，但我希望它能说明一点：单个输入可以编辑整个对象结构。

就个人而言，我会选择选项1，但我更喜欢记录级验证而不是字段级验证。选项2的优点是可以在整个应用程序中重用单个AddressInput。缺点是你没有获得特定的场级焦点/模糊/脏/原始状态。

希望有帮助......？

在Redux表单中拥有多输入字段的好方法是什么？

1 个答案: