Gunakan ReactJS TypeScript MUI, gunakan useState untuk menetapkan nilai TextField dan tambahkan fungsi acara onchange untuk TextField

Question

Saya seorang pemula yang sedang membangun dengan ReactJS dan MUI dan mempunyai borang medan ReactJS TypeScript dengan MuiText. Ingin boleh menggunakan kaedah useState untuk menukar nilai medan teks.

Tambahkan juga fungsi onchnageSaya boleh menambah fungsi onchange untuk medan teks biasa tetapi tidak pasti bagaimana untuk menambahnya untuk medan teks MUI?

import * sebagai React daripada 'react';
import { useState } daripada "react"
import Butang daripada '@mui/material/Button';
import CssBaseline daripada '@mui/material/CssBaseline';
import TextField daripada '@mui/material/TextField';
import Grid daripada '@mui/material/Grid';
import Box daripada '@mui/material/Box';
import Kontena daripada '@mui/bahan/Bekas';
import { createTheme, ThemeProvider } daripada '@mui/material/styles';

import { useForm, SubmitHandler, Controller } daripada 'react-hook-form';
import * sebagai yup daripada 'yup';
import { yupResolver } daripada '@hookform/resolvers/yup';


antara muka IFormInputs {
    laluan fail: rentetan;
}

skema const = yup.object().shape({
    filepath: yup.string().min(4).required(),

});

const theme = createTheme();

eksport fungsi lalai MuiTextField() {
    const {
        kawalan,
        mengendalikanSerah,
        formState: { ralat },
    } = useForm<IFormInputs>({
        penyelesai: yupResolver(skema),
    });
    const [filepath, setFilepath] = useState("vodeo.mp3");

    const onSubmit: SubmitHandler<IFormInputs> = (data) => {
        console.log('data diserahkan: ', data);
        console.log('filepath: ', data.filepath);
    };

    kembali (
        <ThemeProvider theme={theme}>
            <Komponen bekas="utama" maxWidth="lg">
                <CssBaseline />
                <Kotak
                    sx={{
                        marginTop: 8,
                        paparan: 'flex',
                        flexDirection: 'lajur',
                        alignItems: 'pusat',
                    }}
                >

                    <borang onSubmit={handleSubmit(onSubmit)}>
                        <Kotak sx={{ mt: 3 }}>
                            <Jarak bekas grid={2}>

                                <Item grid xs={16} sm={6}>
                                    <Pengawal
                                        name="filepath"
                                        kawalan={kawalan}
                                        defaultValue=""
                                        render={({ medan }) => (
                                            <Medan Teks
                                                {...medan}
                                                label="Laluan Fail"
                                                error={!!errors.filepath}
                                                helperText={errors.filepath ? errors.filepath?.message : ''}autoComplete="laluan-fail"
                                                kelebaran penuh
                                            />
                                        )}
                                    />
                                </Grid>
                                <Butang
                                    type="serahkan"
                                    variant="terkandung"
                                    sx={{ mt: 3, mb: 2 }}
                                >
                                    Hantar
                                </Butang>

                            </Grid>
                        </Kotak>
                    </form>
                </Kotak>
            </Bekas>
        </ThemeProvider>
    );
}

Kemas kini: Ini ialah pautan perkongsian kod: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx

Apabila kami menukar nilai kotak teks kepada auto, kami mahu menukar nilai kotak teks kepada audio.mp3, tetapi ia tidak tidak bekerja.

Answer 1

MUI Textfield juga mempunyai 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"
/>

'Medan' dalam fungsi pemaparan mengandungi onChange. Keadaan borang disimpan dalam useForm. Dalam prop useForm anda perlu menambah defaultValues. Anda tidak menghantar prop type="file", mungkin masalah anda.

Panduan untuk membuat input fail menggunakan borang react hook: https://refine.dev/blog/how-to-multipart-file-upload-with-react-hook-form/

Textfield API: https://mui.com/material-ui/api/text-field/