使用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：
<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/
#