将道具从组件发送到Redux FieldArray的步骤如下:
import { FieldArray, reduxForm } from 'redux-form';
let Form = props => {
const { handleSubmit, pristine, submitting } = props;
// 在这里定义你的表单字段和其他相关元素
return (
<form onSubmit={handleSubmit}>
{/* 在这里放置你的表单字段 */}
<button type="submit" disabled={pristine || submitting}>
提交
</button>
</form>
);
}
Form = reduxForm({
form: 'myForm', // 在这里指定你的表单名称
})(Form);
const renderProps = {
name: 'propsList', // 在这里指定道具列表的名称
component: YourComponent, // 在这里指定你的渲染组件
};
const YourComponent = props => {
// 在这里处理你的渲染组件的逻辑和道具列表
return (
<div>
{/* 在这里放置你的渲染组件和道具列表 */}
</div>
);
};
const renderFieldArray = fieldArrayProps => {
const { fields } = fieldArrayProps;
return (
<div>
{fields.map((field, index) => (
<div key={index}>
{/* 在这里放置你的道具字段 */}
<input
type="text"
{...field.input} // 通过field.input属性将道具与Redux FieldArray关联
/>
</div>
))}
<button type="button" onClick={() => fields.push()}>添加道具</button>
</div>
);
};
const renderPropsWithFieldArray = {
...renderProps,
component: renderFieldArray,
};
const YourComponent = props => {
const { fields } = props;
return (
<div>
{fields.map((field, index) => (
<div key={index}>
{/* 在这里放置你的道具字段 */}
<input
type="text"
{...field.input} // 通过field.input属性将道具与Redux FieldArray关联
/>
</div>
))}
<button type="button" onClick={() => fields.push()}>添加道具</button>
</div>
);
};
renderProps.component = YourComponent;
// 在Form组件中使用FieldArray组件
<Form>
<FieldArray {...renderPropsWithFieldArray} />
</Form>
现在,你的组件就能够将道具发送到Redux FieldArray了。当你点击"添加道具"按钮时,会向Redux FieldArray添加一个新的道具。你可以通过fields属性将道具列表渲染到你的组件中,也可以通过field.input属性将输入字段与Redux FieldArray关联起来。
注意:这里只是一个简单的示例,实际的实现可能会因应用程序的需求而有所不同。使用Redux和React-Redux库的最佳实践是在你的项目中进行更详细的研究和学习。
领取专属 10元无门槛券
手把手带您无忧上云