react-hook-form doesn't work when using material UI button

Question

This is my code without material UI button:

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. 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?

prasanth · Accepted Answer · 2021-04-22 06:41:34Z

2

You are forget to mention the type of the button

for Default material ui button type is

type="button"

Check this git Document

you should mention

type="submit"

So do like this

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

answered Apr 22, 2021 at 6:41

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Abdullah Nabeel · Accepted Answer · 2022-03-23 03:29:36Z

1

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. So the solution is to move your onSubmit function at form to down the onClick event of your new MUI button. The code that works is:

<Button onClick={handleSubmit(onSubmit)} type="submit" variant="contained" component="span"> Submit </Button>

answered Mar 23, 2022 at 3:29

Muhammad Abdullah Nabeel

1642 silver badges12 bronze badges

Comments

sakshya73 · Accepted Answer · 2021-04-22 06:08:28Z

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

Collectives™ on Stack Overflow

react-hook-form doesn't work when using material UI button

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related