我试图将函数作为属性从父组件传递到子 redux-form fieldArray 组件。这是具有以下功能的容器组件:
constructor(props) {
super(props);
this.removePeriodCallback = this.removePeriodCallback.bind(this);
}
removePeriodCallback(periodeId) {
const { formPrefix, periods} = this.props;
this.props.reduxFormChange(
`${formPrefix}.InfoPanel`, 'periods',
periods.filter((e, i) => i === periodeId)
.sort((a, b) => a.fom > b.fom),
);
}
我将它传递给子组件,如下所示:
<FieldArray
name="periods"
component={Periods}
props={{ removePeriodCallback: this.removePeriodCallback }}
/>
在子组件中,我尝试访问如下函数:
export const Periods= ({ fields }) => (
<div>
{fields.map((fieldId, index) => {
const toDate = fields.get(index).tom;
const fromDate = fields.get(index).fom;
const removePeriodCallback = this.props.removePeriodCallback;
return (
<Row key={fieldId}>
<Column>
<div>
<UttakPeriodeType
toDate ={toDate }
fromDate ={fromDate }
removePeriodCallback={removePeriodCallback}
/>
I have also tried to deconstruct it inside arguments of the component:
export const Periods= ({ fields, removePeriodCallback }) => (
<div>
{fields.map((fieldId, index) => {
const toDate = fields.get(index).tom;
const fromDate = fields.get(index).fom;
return (
<Row key={fieldId}>
<Column>
<div>
<UttakPeriodeType
toDate ={toDate }
fromDate ={fromDate }
removePeriodCallback={removePeriodCallback}
/>
但是,当我尝试使用 removePeriodCallback
时,两次都未定义
我做错了什么,我应该如何解决这个问题?
最佳答案
你的解构方法是正确的选择。我尝试使用 redux 表单示例,下面代码中的 somefunction 有效,该函数已通过
<FieldArray name="members" component={renderMembers} props={{ someFunction }}/>
<小时/>
const renderMembers = ({ fields, someFunction }) => (
{fields.map((member, index) => (
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => someFunction()}
/>
您必须检查要将函数传递到的 UttakPeriodeType 组件。
关于javascript - Redux 形式 - 将函数作为属性传递给字段数组给出 undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49648515/