使用ReactJS TypeScript MUI,利用useState设置TextField的值并为TextField添加onchange事件函数
P粉212114661
2023-08-28 21:44:31
<p>我是一个新手,正在使用ReactJS和MUI开发,有一个ReactJS TypeScript与MuiText字段表单。希望能够使用<code>useState</code>方法来改变文本字段的值。</p>
<p>同时为文本字段添加<code>onchnage</code>函数。我可以为普通的文本字段添加onchange函数,但不确定如何为MUI文本字段添加它?</p>
<pre class="brush:php;toolbar:false;">从 'react' 导入 * as React;
从“react”导入{useState}
从“@mui/material/Button”导入按钮;
从 '@mui/material/CssBaseline' 导入 CssBaseline;
从 '@mui/material/TextField' 导入 TextField;
从“@mui/material/Grid”导入网格;
从 '@mui/material/Box' 导入 Box;
从“@mui/material/Container”导入容器;
从 '@mui/material/styles' 导入 { createTheme, ThemeProvider };
从 'react-hook-form' 导入 { useForm, SubmitHandler, Controller };
从 'yup' 导入 * as yup;
从 '@hookform/resolvers/yup' 导入 { yupResolver };
接口 IFormInputs {
文件路径:字符串;
}
const schema = yup.object().shape({
文件路径: yup.string().min(4).required(),
});
const 主题 = createTheme();
导出默认函数 MuiTextField() {
常量{
控制,
处理提交,
表单状态:{错误},
} = useForm({
解析器: yupResolver(schema),
});
const [文件路径,setFilepath] = useState(“vodeo.mp3”);
const onSubmit: SubmitHandler; =(数据)=> {
console.log('数据提交:', data);
console.log('文件路径:', data.filepath);
};
返回 (
<容器组件=“main” maxWidth=“lg”>
>
<盒子
SX={{
边距顶部:8,
显示:'弯曲',
flexDirection: '列',
对齐项目:'居中',
}}
>
<表单onSubmit={handleSubmit(onSubmit)}>
<框 sx={{ mt: 3 }}>
<网格容器间距={2}>
<网格项 xs={16} sm={6}>
<控制器
name="文件路径"
控制={控制}
默认值=“”
渲染={({字段})=> (
<文本字段
{...场地}
label="文件路径"
错误={!!错误.文件路径}
helperText={错误.文件路径?错误.文件路径?.消息:''}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>
MUI Textfield也有onChange:
在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/