如何在Javascript中使用带有React钩子形式的Mantine下拉区域

Question

在javascript中，是否有使用带Reack钩子表单的Mantine下拉区域的解决方案？我正在使用尾风组件进行模态上传，如下所示

import { useForm } from 'react-hook-form';
import { Group, Text, useMantineTheme } from '@mantine/core';
import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
export default function UploadForm({ isVisible, onClose }) {
    const { register, handleSubmit, formState: { errors } } = useForm({});
    const onSubmit = data => console.log(data);
    if (!isVisible) return <></>;
    return (
            <div className="bg-white shadow sm:rounded-lg">
                <div className="px-4 py-5 sm:p-6">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">Create new subcategory</h3>
                    <div className="mt-2 max-w-xl text-sm text-gray-500">
                        <p>Enter subcategory's name</p>
                    </div>
                    <form onSubmit={handleSubmit(onSubmit)} className="mt-5 sm:flex sm:items-center">
                        <div className="w-full sm:max-w-xs">
                            <label htmlFor="Name" className="sr-only">
                                Name
                            </label>
                            <input
                                type="file"
                                {...register("file", { required: true })}
                            />
                        </div>
                        <button
                            type="submit"
                            className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                        >
                            Save
                        </button>
                    </form>
                </div>
            </div>
    );
}

但是，当我试图将输入更改为Mantine下拉区域时，总是会发生错误。有什么想法吗？非常感谢，为糟糕的英语感到抱歉！

我想要一个只有下拉区域和提交按钮的模态表单，但是我仍然混淆了Mantine下拉列表

Answer 1

<Controller
                        control={methods.control}
                        name="fileupload"
                        render={({ field }) => (
                          <Dropzone
                            onDrop={(files) =>
                              methods.setValue("fileupload", files)
                            }
                            onReject={(files) =>
                              console.log("rejected files", files)
                            }
                            maxSize={3 * 1024 ** 2}
                            accept={IMAGE_MIME_TYPE}
                            {...field}
                          >
                            <Group
                              position="center"
                              spacing="xl"
                              style={{
                                minHeight: 220,
                                pointerEvents: "none",
                              }}
                            >
                              <Dropzone.Accept>
                                <IconUpload
                                  size={50}
                                  stroke={1.5}
                                  color={
                                    theme.colors[theme.primaryColor][
                                      theme.colorScheme === "dark" ? 4 : 6
                                    ]
                                  }
                                />
                              </Dropzone.Accept>
                              <Dropzone.Reject>
                                <IconX
                                  size={50}
                                  stroke={1.5}
                                  color={
                                    theme.colors.red[
                                      theme.colorScheme === "dark" ? 4 : 6
                                    ]
                                  }
                                />
                              </Dropzone.Reject>
                              <Dropzone.Idle>
                                <IconPhoto size={50} stroke={1.5} />
                              </Dropzone.Idle>

                              <div>
                                <Text size="xl" inline>
                                  Drag images here or click to select files
                                </Text>
                                <Text
                                  size="sm"
                                  color="dimmed"
                                  inline
                                  mt={7}
                                >
                                  Attach as many files as you like, each
                                  file should not exceed 5mb
                                </Text>
                              </div>
                            </Group>
                          </Dropzone>
                        )}
                      />

并将所有表单包装在<FormProvider {...methods}></FormProvider>中，将提交函数更改为onSubmit={methods.handleSubmit()}