Verwenden Sie ReactJS TypeScript MUI, verwenden Sie useState, um den Wert von TextField festzulegen und fügen Sie eine Onchange-Ereignisfunktion für TextField hinzu

Question

Ich bin ein Neuling in der Entwicklung mit ReactJS und MUI und habe ein ReactJS TypeScript mit MuiText-Feldformular. Sie möchten die Methode useState verwenden, um den Wert eines Textfelds zu ändern.

Fügen Sie außerdem die Funktion onchnage hinzu.Ich kann die Onchange-Funktion für ein normales Textfeld hinzufügen, bin mir aber nicht sicher, wie ich sie für ein MUI-Textfeld hinzufügen soll?

import * as React from 'react';
import { useState } aus "react"
Button aus '@mui/material/Button' importieren;
CssBaseline aus '@mui/material/CssBaseline' importieren;
TextField aus '@mui/material/TextField' importieren;
Gitter aus '@mui/material/Grid' importieren;
Box aus '@mui/material/Box' importieren;
Container importieren aus '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';

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


Schnittstelle IFormInputs {
    Dateipfad: Zeichenfolge;
}

const schema = yup.object().shape({
    Dateipfad: yup.string().min(4).required(),

});

const theme = createTheme();

Standardfunktion MuiTextField() exportieren {
    const {
        Kontrolle,
        handleSubmit,
        formState: { Fehler },
    } = useForm<IFormInputs>({
        Resolver: yupResolver(schema),
    });
    const [filepath, setFilepath] = useState("vodeo.mp3");

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

    zurückkehren (
        <ThemeProvider theme={theme}>
            <Containerkomponente="main" maxWidth="lg">
                <CssBaseline />
                <Box
                    sx={{
                        marginTop: 8,
                        Anzeige: 'flex',
                        flexDirection: 'Spalte',
                        alignItems: 'center',
                    }}
                >

                    <form onSubmit={handleSubmit(onSubmit)}>
                        <Box sx={{ mt: 3 }}>
                            <Rastercontainerabstand={2}>

                                <Rasterelement xs={16} sm={6}>
                                    <Controller
                                        name="Dateipfad"
                                        Kontrolle={Kontrolle}
                                        defaultValue=""
                                        render={({ field }) => (
                                            <TextField
                                                {...Feld}
                                                label="Dateipfad"
                                                error={!!errors.filepath}
                                                helperText={errors.filepath ? Fehler.Dateipfad?.Nachricht: ''}autoComplete="Dateipfad"
                                                Gesamtbreite
                                            />
                                        )}
                                    />
                                </Gitter>
                                <Schaltfläche
                                    type="submit"
                                    Variante="enthalten"
                                    sx={{ mt: 3, mb: 2 }}
                                >
                                    Einreichen
                                </Button>

                            </Gitter>
                        </Box>
                    </form>
                </Box>
            </Container>
        </ThemeProvider>
    );
}

Update: Dies ist der Codeshare-Link: https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx

Wenn wir den Wert des Textfelds in auto ändern, möchten wir den Wert des Textfelds in audio.mp3 ändern, aber das passiert Funktioniert nicht.

Answer 1

MUI Textfield也有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"
/>

在render函数中的'field'包含onChange。 表单的状态保存在useForm中。在useForm的props中，您需要添加defaultValues。您没有传递prop type="file"，可能是您的问题。

使用react hook form创建文件输入的指南：https://refine.dev/blog/how-to-multipart-file-upload-with-react-hook-form/

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