<p>저는 ReactJS 및 MUI로 개발하는 초보자이며 MuiText 필드 양식이 포함된 ReactJS TypeScript를 가지고 있습니다. <code>useState</code> 메소드를 사용하여 텍스트 필드의 값을 변경할 수 있기를 원합니다. </p> <p>또한 텍스트 필드에 <code>onchnage</code> 함수를 추가합니다.일반 텍스트 필드에 onchange 기능을 추가할 수 있지만 MUI 텍스트 필드에 추가하는 방법을 모르시나요?</p> <pre class="brush:php;toolbar:false;">import *를 '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 } from '@mui/material/styles'; import { useForm, SubmitHandler, Controller } from 'react-hook-form'; *를 '예'에서 '예'로 가져옵니다. '@hookform/resolvers/yup'에서 { yupResolver }를 가져옵니다. 인터페이스 IFormInputs { 파일 경로: 문자열; } const 스키마 = yup.object().shape({ 파일 경로: yup.string().min(4).required(), }); const 테마 = createTheme(); 기본 함수 MuiTextField() 내보내기 { const { 제어, 핸들제출, formState: { 오류 }, } = useForm<IFormInputs>({ 리졸버: yupResolver(스키마), }); const [filepath, setFilepath] = useState("vodeo.mp3"); const onSubmit: SubmitHandler<IFormInputs> = (데이터) => { console.log('제출된 데이터: ', data); console.log('파일 경로: ', data.filepath); }; 반품 ( <ThemeProvider 테마={테마}> <컨테이너 구성 요소="main" maxWidth="lg"> <CssBaseline /> <박스 sx={{ marginTop: 8, 디스플레이: '플렉스', flexDirection: '열', alignItems: '가운데', }} > <onSubmit={handleSubmit(onSubmit)}> <박스 sx={{ mt: 3 }}> <그리드 컨테이너 간격={2}> <그리드 항목 xs={16} sm={6}> <컨트롤러 이름="파일 경로" 컨트롤={컨트롤} defaultValue="" 렌더링={({ 필드 }) => ( <텍스트 필드 {...필드} label="파일 경로" 오류={!!errors.filepath} helperText={errors.filepath ? 오류.파일 경로?.메시지: ''}autoComplete="파일 경로" 전체 넓이 /> )} /> </그리드> <버튼 type="제출" 변형="포함" sx={{ mt: 3, mb: 2 }} > 제출하다 </버튼> </그리드> </박스> </양식> </박스> </컨테이너> </테마 제공자> ); }</pre> <p>업데이트: 코드쉐어 링크는 다음과 같습니다: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx</p> <p>텍스트 상자의 값을 <code>auto</code>로 변경할 때 텍스트 상자의 값을 <code>audio.mp3</code>로 변경하려고 하지만 그렇지 않습니다. 작동하지 않습니다. </p>