![](/img/trans.png)
[英]Passing `this` to function that accesses property on it gives undefined?
[英]Redux form - passing a function as a property to a field array gives undefined
我试图将一个函数作为属性从父组件传递给子redux形式的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组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.