如何让 Mantine Modals 与表单状态一起使用

Question

我有一个像这样的组件，使用 Mantine UI、Nextjs 14、Mantine Forms 和 Mantine Forms 库构建。

我尝试使用 useState 来管理表单状态，但是每当我更改角色并在选择组件外部单击时，角色就会变回初始值，这是不希望的行为。

// All Imports here

const AddMember = ({ id }: { id: string }) => {
 
  const form = useForm<{ email: string; role: Role }>({
    initialValues: {
      role: "Admin",
    },
  });

  async function submitForm(values: { email: string; role: Role }) {
   ...
  }

  const ModalForm = () => {
    return (
      <form
        className="space-y-3"
        onSubmit={form.onSubmit((values) => submitForm(values))}
      >
      
        <Select
          label="Role"
          placeholder="Select the member's role"
          {...form.getInputProps("role")}
          data={[
            { value: "Admin", label: "Admin" },
            { value: "Employee", label: "Employee" },
            { value: "Manager", label: "Manager" },
          ]}
        />

        <Button
          fullWidth
          type="submit"
          onClick={() => {
            //Submit form here
           }
          mt="md"
        >
          Submit
        </Button>
      </form>
    );
  };

  return (
    <Button
      onClick={() => {
        modals.open({
          title: "Add new organisation member",
          children: <ModalForm />,
        });
      }}
    >
      Add Member
    </Button>
  );
};

export default AddMember;

问题是，每当我更改“选择”输入上的角色，然后单击输入外部时，表单状态都会返回到表单上的初始角色...

Answer 1

引用Mantine文档：

动态内容和模态管理器：

请注意，使用模态管理器时，不支持动态内容。一旦模态是 打开后，快照会保存到内部状态并且无法更新。

如果您打算在模态中包含动态内容，可以：

使用内部组件状态，或者使用模态组件代替 模态经理

因此，要使其正常工作，您可以保持模态隐藏/打开的状态，然后使用模态管理器，您可以显示信息。那么表单就会适当地反映状态的变化。