Use ReactJS TypeScript MUI, use useState to set the value of TextField and add onchange event function for TextField

Question

I am a newbie developing with ReactJS and MUI and have a ReactJS TypeScript with MuiText field form. Want to be able to use the useState method to change the value of a text field.

Also add the onchnage function to the text field.I can add onchange function for normal textfield but not sure how to add it for MUI textfield?

import * as React from 'react';
import { useState } from "react"
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';

import { useForm, SubmitHandler, Controller } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';


interface IFormInputs {
    filepath: string;
}

const schema = yup.object().shape({
    filepath: yup.string().min(4).required(),

});

const theme = createTheme();

export default function MuiTextField() {
    const {
        control,
        handleSubmit,
        formState: { errors },
    } = useForm<IFormInputs>({
        resolver: yupResolver(schema),
    });
    const [filepath, setFilepath] = useState("vodeo.mp3");

    const onSubmit: SubmitHandler<IFormInputs> = (data) => {
        console.log('data submitted: ', data);
        console.log('filepath: ', data.filepath);
    };

    return (
        <ThemeProvider theme={theme}>
            <Container component="main" maxWidth="lg">
                <CssBaseline />
                <Box
                    sx={{
                        marginTop: 8,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >

                    <form onSubmit={handleSubmit(onSubmit)}>
                        <Box sx={{ mt: 3 }}>
                            <Grid container spacing={2}>

                                <Grid item xs={16} sm={6}>
                                    <Controller
                                        name="filepath"
                                        control={control}
                                        defaultValue=""
                                        render={({ field }) => (
                                            <TextField
                                                {...field}
                                                label="File Path"
                                                error={!!errors.filepath}
                                                helperText={errors.filepath ? errors.filepath?.message : ''}autoComplete="file-path"
                                                fullWidth
                                            />
                                        )}
                                    />
                                </Grid>
                                <Button
                                    type="submit"
                                    variant="contained"
                                    sx={{ mt: 3, mb: 2 }}
                                >
                                    Submit
                                </Button>

                            </Grid>
                        </Box>
                    </form>
                </Box>
            </Container>
        </ThemeProvider>
    );
}

Update: This is the codeshare link: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx

When we change the value of the text box to auto, we want to change the value of the text box to audio.mp3, but it doesn't work.

Answer 1

MUI Textfield also has onChange:

<TextField
     error={Boolean(touched.name && errors.name)}
     fullWidth
     label={t('Name')}
     name="name"
     onBlur={handleBlur}
     onChange={handleChange}
     value={values.name}
     variant="outlined"
     autoComplete="off"
/>

The 'field' in the render function contains onChange. The state of the form is saved in useForm. In useForm's props you need to add defaultValues. You are not passing prop type="file", may be your problem.

Guide to creating file input using react hook form: https://refine.dev/blog/how-to-multipart-file-upload-with-react-hook-form/

Textfield API: https://mui.com/material-ui/api/text-field/