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

Question

我正在使用Ant Design Pro 界面我前端的库。

当我单击要设置的编辑按钮时默认值到我的模态输入字段。但是当我第一次点击编辑时它工作正常并且 defaultValues 以正确的形式出现。

之后，当我关闭我的模式并单击“编辑”按钮时，模式中会出现相同的结果。问题是模态隐藏和它不是重新渲染.

{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>
)}

如果有人知道如何在 React 中重新渲染 Modal，请帮助我。

Answer 1

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

const [form] = useForm();

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