![FieldArray]( "FieldArray")
本文介绍了redux-form - 带有 FieldArray 组件的 asyncBlurFields的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何在 FieldArray 内的 Field 组件上触发异步验证.我有类似的东西:
class MyForm 扩展组件 {构造函数(道具){超级(道具)}使成为() {const { handleSubmit } = this.props返回 (<form onSubmit={handleSubmit}><字段名称=名称"类型=文本"组件={RenderInputField}/><字段数组名称=爱好"组件={渲染爱好}/></表单>)}}MyFormBase = reduxForm ({表格:'我的表格'，证实，异步验证，asyncBlurFields: ['name', 'hobbies.hobby']})(MyFormBase)
使用 RenderHobbies 作为:
const RenderHobbies = ({fields}) =>(<div>{fields.map((hobby, index) => ({<字段name={`${hobby}.hobby`}组件={RenderInputField}/>}))}
)导出默认 RenderHobbies
这不起作用.异步验证将针对模糊上的名称"而不是hobbies.hobby"触发.正确的语法是什么?
解决方案
我正在寻找的语法是:
asyncBlurFields: ['hobbies[].hobby']
很简单，我只是在文档中找不到它.我通过 this thread
找到了它
I'm wondering how to get async validation to trigger on a Field component inside of a FieldArray. I have something like:
class MyForm extends Component {
constructor(props) {
super(props)
}
render() {
const { handleSubmit } = this.props
return (
<form onSubmit={handleSubmit}>
<Field
name="name"
type="text"
component={RenderInputField}
/>
<FieldArray
name="hobbies"
component={RenderHobbies}
/>
</form>
)
}
}
MyFormBase = reduxForm ({
form: 'MyForm',
validate,
asyncValidate,
asyncBlurFields: ['name', 'hobbies.hobby']
})(MyFormBase)
With RenderHobbies as:
const RenderHobbies = ({fields}) => (
<div>
{fields.map((hobby, index) => ({
<Field
name={`${hobby}.hobby`}
component={RenderInputField}
/>
}))}
</div>
)
export default RenderHobbies
This doesn't work. async validation will fire for "name" on blur but not "hobbies.hobby". What would the correct syntax for that be?
解决方案
The syntax I was looking for was:
asyncBlurFields: ['hobbies[].hobby']
Pretty simple, I just couldn't find it anywhere in the docs. I found it by going through this thread
这篇关于redux-form - 带有 FieldArray 组件的 asyncBlurFields的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！