如何在 React Functional 组件中重新渲染 Modal

Question

我使用 Ant design pro UI 库来开发我的前端。 场景是当我单击编辑按钮时，我想将 defaultValues 设置为我的模态输入字段。 但是当我第一次点击编辑时它工作正常并且默认值带有正确的形式。 之后我关闭我的模态并再次单击“编辑”按钮，然后相同的结果出现在模态中。 问题是 Modal 只隐藏而不是重新渲染。 如果有人知道如何在反应中重新渲染模态，请帮助我......

{visi && (
        <Modal
          title="Edit Plan"
          visible={visi}
          onCancel={() => {
            hideModal();

            if (!showDetail) {
              setCurrentRow(undefined);
            }
          }}
          okButtonProps={{ style: { display: 'none' } }}
          cancelButtonProps={{ style: { display: 'none' } }}
          bodyStyle={{ width: 400 }}
          values={currentRow || {}}
        >
          <Form form={form} layout="vertical" name="addNewPlan" onFinish={handleUpdate}>
            <FormItem name="id" hidden initialValue={singlePackage ? singlePackage.id : null}>
              <Input placeholder="Basic Plan" style={{ width: '33vw', marginTop: -10 }} />
            </FormItem>
            <FormItem
              name="name"
              label="Plan Name"
              rules={[
                {
                  required: true,
                  message: 'Please input plan name!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.name : null}
            >
              <Input placeholder="Basic Plan" style={{ width: '33vw', marginTop: -10 }} />
            </FormItem>
            <FormItem
              name="description"
              label="Description"
              rules={[
                {
                  required: true,
                  message: 'Please input description!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.description : null}
            >
              <TextArea
                allowClear={true}
                style={{ marginTop: -10, width: '33vw' }}
                placeholder="The Basic Plan having this kind of features and you can Send 300 email in a day."
              />
            </FormItem>
            <FormItem
              name="campaign_count"
              label="Campaign Count"
              rules={[
                {
                  required: true,
                  message: 'Please input campaign count!',
                },
              ]}
              initialValue={singlePackage ? singlePackage.campaign_count : null}
            >
              <Input style={{ width: '33vw', marginTop: -10 }} type="number" />
            </FormItem>
            <FormItem>
              <div style={{ width: '33vw' }}>
                <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
                  <span>Update</span>
                </Button>
                <Button type="default" onClick={hideModal} style={{ float: 'right' }}>
                  <span>Cancel</span>
                </Button>
              </div>
            </FormItem>
          </Form>
        </Modal>
)}

Answer 1

您需要使用表单实例的resetFields方法。

const [form] = useForm();

return (
  <Modal onCancel={() => {
    hideModal();
    form.resetFields();
  }}>
    <Form form={form}>...</Form>
  </Modal>
)