ReactJS - 运行第二次点击时设置的功能状态

时间:2017-10-25 15:31:16

标签: javascript node.js reactjs

我正在尝试将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>
    );
  }
}

任何帮助将不胜感激。 提前谢谢!

0 个答案:

没有答案