<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>

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