ReactJS TypeScript MUI를 사용하고, useState를 사용하여 TextField 값을 설정하고 TextField에 대한 onchange 이벤트 함수를 추가합니다.

Question

저는 ReactJS 및 MUI로 개발하는 초보자이며 MuiText 필드 양식이 포함된 ReactJS TypeScript를 가지고 있습니다. useState 메소드를 사용하여 텍스트 필드의 값을 변경할 수 있기를 원합니다.

또한 텍스트 필드에 onchnage 함수를 추가합니다.일반 텍스트 필드에 onchange 기능을 추가할 수 있지만 MUI 텍스트 필드에 추가하는 방법을 모르시나요?

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 }}
                                >
                                    제출하다
                                </버튼>

                            </그리드>
                        </박스>
                    </양식>
                </박스>
            </컨테이너>
        </테마 제공자>
    );
}

업데이트: 코드쉐어 링크는 다음과 같습니다: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx

텍스트 상자의 값을 auto로 변경할 때 텍스트 상자의 값을 audio.mp3로 변경하려고 하지만 그렇지 않습니다. 작동하지 않습니다.

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/