javascript - 使用 Material UI 按钮时，react-hook-form 不起作用

Question

这是我的代码，没有 Material UI 按钮:

const {register, handleSubmit} = useForm();

const onSubmit = (data) => {
    console.log(data)
}
const handleChange = (e) => {
    console.log(e.target.files)
}

...

<form id="myFile" onSubmit={handleSubmit(onSubmit)}>
    <input id="file1" type="file" {...register("file1")} onChange={handleChange}/>
    <input type="submit"/>
</form>

这对我有用，但是当我尝试添加 Material UI 按钮而不是输入时，我会得到 onChange 值，但是当我单击提交时。我没有收到任何表单数据。

const {register, handleSubmit} = useForm();

const onSubmit = (data) => {
    console.log(data)
}
const handleChange = (e) => {
    console.log(e.target.files)
}

...

<form id="myFile" onSubmit={handleSubmit(onSubmit)}>
    <input id="file1" type="file" {...register("file1")} onChange={handleChange} 
    style={{display:"none"}}/>
    <label htmlFor="file1">
        <Button variant="contained" component="span">
             Choose file
        </Button>
    </label>
    <input type="submit"/>
</form>

有什么解决办法吗？

Answer 1

您忘记提及按钮的类型

默认 Material ui 按钮类型为

type="button"

Check this git Document

你应该提到

type="submit"

就这样吧

<Button type="submit" variant="contained" component="span">
             Choose file
</Button>