使用ReactJS TypeScript MUI，利用useState设置TextField的值并为TextField添加onchange事件函数
<p>我是一个新手，正在使用ReactJS和MUI开发，有一个ReactJS TypeScript与MuiText字段表单。希望能够使用<code>useState</code>方法来改变文本字段的值。</p>
<p>同时为文本字段添加<code>onchnage</code>函数。我可以为普通的文本字段添加onchange函数，但不确定如何为MUI文本字段添加它？</p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre>
<p>更新：
这是codeshare链接：https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx</p>
<p>当我们将文本框的值更改为<code>auto</code>时，希望将文本框的值更改为<code>audio.mp3</code>，但它不起作用。</p>
1
774
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
MUI Textfield也有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" />在render函数中的'field'包含onChange。 表单的状态保存在useForm中。在useForm的props中，您需要添加defaultValues。您没有传递prop type="file"，可能是您的问题。
使用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/