[英]react-hook-form doesn't work when using material UI button
This is my code without material UI button:这是我没有材料 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>
This works for me, but when I try to add material UI button instead of input, I get onChange value but when I click submit.这对我有用,但是当我尝试添加材料 UI 按钮而不是输入时,我得到了 onChange 值,但是当我单击提交时。 I don't get any form data.
我没有得到任何表格数据。
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>
Is there any solution here?这里有什么解决办法吗?
You are forget to mention the type of the button您忘记提及按钮的类型
for Default material ui button type is默认材质 ui 按钮类型为
type="button"
Check this git Document 检查此 git 文档
you should mention你应该提到
type="submit"
So do like this所以这样做
<Button type="submit" variant="contained" component="span">
Choose file
</Button>
You can try something like this:你可以尝试这样的事情:
import React, { useState } from 'react';
import { Button, TextField } from '@material-ui/core';
import useForm from 'react-hook-form';
import { object, string } from 'yup';
const Form: React.FC = () => {
const schema = object().shape({
username: string().required('username required'),
password: string().required('password required'),
});
const { register, handleSubmit, errors } = useForm({ validationSchema: schema });
const onSubmit = (data: any) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
name="username"
error={!!errors.username}
label="Username"
helperText={errors.username ? errors.username.message : ''}
type="email"
inputRef={register}
fullWidth
/>
<TextField
name="password"
error={!!errors.password}
label="Password"
inputRef={register}
helperText={errors.password ? errors.password.message : ''}
type="password"
fullWidth
/>
<Button
color="secondary"
type="submit"
variant="contained"
fullWidth
>
Submit
</Button>
</form>
);
};
ref: How to use react-hook-form with ant design or material UI ref: 如何在 ant 设计或材料 UI 中使用 react-hook-form
Currently your submit event is controlled by the whole form element <form onSubmit={handleSubmit(onSubmit)}>
but this is possible only when the form has a relevant submit button like <input type="submit"/>
but when you use materail ui, MUI button doesnt distincts submit type even if mentioned.目前,您的提交事件由整个表单元素
<form onSubmit={handleSubmit(onSubmit)}>
控制,但这只有在表单具有相关的提交按钮(如<input type="submit"/>
但是当您使用 materail 时才有可能ui,即使提到,MUI 按钮也不会区分提交类型。 So the solution is to move your onSubmit
function at form to down the onClick
event of your new MUI button.因此,解决方案是将表单上的
onSubmit
function 移动到新 MUI 按钮的onClick
事件下。 The code that works is:有效的代码是:
<Button onClick={handleSubmit(onSubmit)} type="submit" variant="contained" component="span"> Submit </Button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.