ReactJS TypeScript MUI を使用し、useState を使用して TextField の値を設定し、TextField の onchange イベント関数を追加します
<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>
