在使用redux-form中的FieldArray时,可以在不同组件上显示FieldArray中的字段。以下是一种实现方法:
import { Field, FieldArray, reduxForm } from 'redux-form';
import React from 'react';
const ParentComponent = ({ fields }) => {
return (
<div>
{/* 在这里可以显示其他组件 */}
<button type="button" onClick={() => fields.push()}>添加字段</button>
{fields.map((field, index) => (
<ChildComponent key={index} fieldName={field} />
))}
</div>
);
};
export default reduxForm({
form: 'myForm',
})(ParentComponent);
import React from 'react';
import { Field } from 'redux-form';
const ChildComponent = ({ fieldName }) => {
return (
<div>
<Field name={fieldName} component="input" type="text" />
{/* 在这里可以显示其他子组件 */}
</div>
);
};
export default ChildComponent;
在父组件中,使用FieldArray
组件来包裹子组件,并通过fields
属性将FieldArray的字段传递给子组件。在子组件中,使用Field
组件来显示每个字段。
使用redux-form的push
方法可以动态添加字段,例如在点击按钮时调用fields.push()
方法来添加一个新的字段。
这种方法可以在一个组件中显示FieldArray中的字段,并且可以根据需要动态添加或删除字段。
备注:腾讯云的相关产品和产品介绍链接地址暂时无法提供,建议在腾讯云官方网站搜索相关产品以获取更多信息。
云+社区沙龙online [云原生技术实践]
TVP技术夜未眠
腾讯云存储专题直播
云+社区技术沙龙[第4期]
DB・洞见
云+社区技术沙龙[第7期]
云+社区沙龙online [腾讯云中间件]
北极星训练营
领取专属 10元无门槛券
手把手带您无忧上云