我正在尝试将autoForm
组件显示为Modal
(父弹出式)组件中的子组件。
我面临的问题是,在呈现Modal
时,它会显示包含所有必填字段的autoForm
组件,但不会在其中显示字段值。
在第二次单击时,它会显示字段值。第一次单击时字段状态未设置,这就是数据未显示的原因。不确定为什么第一次点击时没有设置状态。
- autoForm
组件: -
export default class ActivityForm extends React.Component<IActivityFormProps> {
render() {
const { fieldValues = {}, moduleName, onSubmit } = this.props;
return (
<AutoForm
customOnly
moduleName={moduleName}
fieldValues={fieldValues}
onSubmit={onSubmit}
>
{({ fields, createField, addProps, renderSubmit, group }) => {
return (
<Flex fill center alignCenter>
{fields.activityRecord && fields.activityRecord.length > 0
? fields.activityRecord.map((activity, index) => {
const { time, type, note } = activity;
return (
<Flex key={index} center column alignCenter>
{group([
addProps(time, {
label: 'Date',
}),
type,
])}
{group([note])}
{renderSubmit()}
</Flex>
);
})
: null}
</Flex>
);
}}
</AutoForm>
);
}
}
模态组件: -
export default class ActivityEdit extends React.Component<IEditActivityProps> {
activityRecord[activity] = data;
activityRecord['callback'] = callback;
onClose();
onUpdate(activityRecord);
}
render() {
const { item, active, activity, onClose } = this.props;
const { activityRecord = [], _id = '' } = item || {};
const activityFields = [activityRecord[activity]];
return (
<Modal
active={active}
onClose={onClose}
onGoBack={onClose}
title={'Edit Activity'}
>
<Form
fieldValues={{ activityRecord: activityFields, _id }}
moduleName={'clientUsers'}
onSubmit={this.onSubmit}
/>
</Modal>
);
}
}
任何帮助将不胜感激。 提前谢谢!