使用ReactJS TypeScript MUI,利用useState设置TextField的值并为TextField添加onchange事件函数
P粉212114661
P粉212114661 2023-08-28 21:44:31
[React讨论组]
<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 &quot;react&quot; 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&lt;IFormInputs&gt;({ resolver: yupResolver(schema), }); const [filepath, setFilepath] = useState(&quot;vodeo.mp3&quot;); const onSubmit: SubmitHandler&lt;IFormInputs&gt; = (data) =&gt; { console.log('data submitted: ', data); console.log('filepath: ', data.filepath); }; return ( &lt;ThemeProvider theme={theme}&gt; &lt;Container component=&quot;main&quot; maxWidth=&quot;lg&quot;&gt; &lt;CssBaseline /&gt; &lt;Box sx={{ marginTop: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', }} &gt; &lt;form onSubmit={handleSubmit(onSubmit)}&gt; &lt;Box sx={{ mt: 3 }}&gt; &lt;Grid container spacing={2}&gt; &lt;Grid item xs={16} sm={6}&gt; &lt;Controller name=&quot;filepath&quot; control={control} defaultValue=&quot;&quot; render={({ field }) =&gt; ( &lt;TextField {...field} label=&quot;File Path&quot; error={!!errors.filepath} helperText={errors.filepath ? errors.filepath?.message : ''} autoComplete=&quot;file-path&quot; fullWidth /&gt; )} /&gt; &lt;/Grid&gt; &lt;Button type=&quot;submit&quot; variant=&quot;contained&quot; sx={{ mt: 3, mb: 2 }} &gt; Submit &lt;/Button&gt; &lt;/Grid&gt; &lt;/Box&gt; &lt;/form&gt; &lt;/Box&gt; &lt;/Container&gt; &lt;/ThemeProvider&gt; ); }</pre> <p>更新: 这是codeshare链接:https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx</p> <p>当我们将文本框的值更改为<code>auto</code>时,希望将文本框的值更改为<code>audio.mp3</code>,但它不起作用。</p>
P粉212114661
P粉212114661

全部回复(1)
P粉969666670

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/

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号