ReactJS TypeScript MUI を使用し、useState を使用して TextField の値を設定し、TextField の onchange イベント関数を追加します

Question

<p>私は ReactJS と MUI を使って開発している初心者で、MuiText フィールド フォームを備えた ReactJS TypeScript を持っています。 <code>useState</code> メソッドを使用してテキスト フィールドの値を変更できるようにしたいと考えています。 </p> <p><code>onchnage</code> 関数もテキスト フィールドに追加します。通常のテキストフィールドに onchange 関数を追加できますが、MUI テキストフィールドに追加する方法がわかりません。</p> <pre class="brush:php;toolbar:false;">import * as React from 'react'; 「react」からインポート { useState } '@mui/material/Button' からボタンをインポートします。 '@mui/material/CssBaseline' から CssBaseline をインポートします。 '@mui/material/TextField' から TextField をインポートします。 '@mui/material/Grid' からグリッドをインポートします。 '@mui/material/Box' からボックスをインポートします。 '@mui/material/Container' からコンテナをインポートします。 import { createTheme, ThemeProvider } から '@mui/material/styles'; import { useForm、SubmitHandler、Controller } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } から '@hookform/resolvers/yup'; インターフェース IFormInputs { ファイルパス: 文字列; } const スキーマ = yup.object().shape({ ファイルパス: yup.string().min(4).required(), }); const テーマ = createTheme(); デフォルト関数 MuiTextField() をエクスポート { 定数{ コントロール、 ハンドル送信、 formState: { エラー }、 } = useForm<IFormInputs>({ リゾルバー: yupResolver(スキーマ)、 }); const [ファイルパス, setFilepath] = useState("vodeo.mp3"); const onSubmit: SubmitHandler = (データ) => { console.log('送信されたデータ: ', data); console.log('ファイルパス: ', data.filepath); }; 戻る （ <ThemeProvider テーマ={テーマ}> <コンテナコンポーネント="メイン" maxWidth="lg"> <CssBaseline /> <ボックス sx={{ マージントップ: 8、 表示: 'フレックス'、 flexDirection: '列', alignItems: '中心', }} > <フォーム onSubmit={handleSubmit(onSubmit)}> <ボックス sx={{ mt: 3 }}> <グリッドコンテナの間隔={2}> <グリッド項目 xs={16} sm={6}> <コントローラー 名前= "ファイルパス" コントロール={コントロール} デフォルト値="" render={({ フィールド }) => ( <テキストフィールド {...分野} label="ファイルパス" エラー={!!errors.ファイルパス} helperText={エラー.ファイルパス ?エラー.ファイルパス?.メッセージ: ''}autoComplete="ファイルパス" 全幅 /> )} /> </グリッド> <ボタン type="送信" バリアント=「含まれている」 sx={{ mt: 3、mb: 2 }} > 提出する </ボタン> </グリッド> </ボックス> </フォーム> </ボックス> </コンテナ> </ThemeProvider> ); }</pre> <p>更新: コードシェアのリンクは次のとおりです: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx</p> <p>テキスト ボックスの値を <code>auto</code> に変更するとき、テキスト ボックスの値を <code>audio.mp3</code> に変更したいのですが、変更されません。働かないよ。 </p>

Answer 1

MUI テキストフィールドには onChange もあります:

リーリー

レンダリング関数の「フィールド」には onChange が含まれています。 フォームの状態は useForm に保存されます。 useForm の props に、defaultValues を追加する必要があります。 prop type="file" を渡していないのが問題である可能性があります。

反応フック フォームを使用してファイル入力を作成するためのガイド: https://refine.dev/blog/how-to-multipart-file-upload-with-react-hook-form/

テキストフィールド API: https://mui.com/material-ui/api/text-field/