Use ReactJS TypeScript MUI, use useState to set the value of TextField and add onchange event function for TextField-PHP Chinese Network Q&A

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({ resolver: yupResolver(schema), }); const [filepath, setFilepath] = useState("vodeo.mp3"); const onSubmit: SubmitHandler = (data) => { console.log('data submitted: ', data); console.log('filepath: ', data.filepath); }; return (          (  )} />     
    ); }

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.

reply all (1)

P粉9696666702023-08-29 19:47:05 1 floor

MUI Textfield also has onChange:

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/