Utilisez ReactJS TypeScript MUI, utilisez useState pour définir la valeur de TextField et ajoutez la fonction d'événement onchange pour TextField

Question

Je suis un débutant en développement avec ReactJS et MUI et j'ai un formulaire de champ ReactJS TypeScript avec MuiText. Vous souhaitez pouvoir utiliser la méthode useState pour modifier la valeur d’un champ de texte.

Ajoutez également la fonction onchnageJe peux ajouter la fonction onchange pour le champ de texte normal, mais je ne sais pas comment l'ajouter pour le champ de texte MUI ?

import * as React from 'react';
importer { useState } depuis "react"
importer le bouton depuis '@mui/material/Button' ;
importer CssBaseline depuis '@mui/material/CssBaseline' ;
importer TextField depuis '@mui/material/TextField' ;
importer la grille depuis '@mui/material/Grid' ;
importer la boîte depuis '@mui/material/Box' ;
importer un conteneur depuis '@mui/material/Container' ;
importer { createTheme, ThemeProvider } depuis '@mui/material/styles' ;

importer { useForm, SubmitHandler, Controller } depuis 'react-hook-form' ;
importer * comme ouais à partir de « ouais » ;
importer { yupResolver } depuis '@hookform/resolvers/yup' ;


interface IFormInputs {
    chemin du fichier : chaîne ;
}

schéma const = ouais.object().shape({
    chemin du fichier : yup.string().min(4).required(),

});

const thème = createTheme();

fonction d'exportation par défaut MuiTextField() {
    const {
        contrôle,
        handleEnvoyer,
        formState : {erreurs},
    } = useForm({
        résolveur : yupResolver (schéma),
    });
    const [chemin du fichier, setFilepath] = useState("vodeo.mp3");

    const onSubmit : SubmitHandler = (données) => {
        console.log('données soumises : ', données);
        console.log('chemin du fichier : ', data.chemin du fichier);
    } ;

    retour (
        
            
                
                

                    

                        
                            

                                <Élément de grille xs={16} sm={6}>
                                     (
                                            
                                        )}
                                    />
                                
                                
                                    Soumettre
                                

                            
                        ≪/Boîte>
                    
                ≪/Boîte>
            
        
    );
}
Mise à jour :
Voici le lien de partage de code : https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx
Lorsque nous modifions la valeur de la zone de texte en auto, nous souhaitons modifier la valeur de la zone de texte en audio.mp3, mais ce n'est pas le cas. ça ne marche pas. 

Answer 1

MUI Textfield a également 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"
/>

Le « champ » dans la fonction de rendu contient onChange. L'état du formulaire est enregistré dans useForm. Dans les accessoires de useForm, vous devez ajouter des valeurs par défaut. Vous ne transmettez pas prop type="file", c'est peut-être votre problème.

Guide pour créer une entrée de fichier à l'aide du formulaire de hook de réaction : https://refine.dev/blog/how-to-multipart-file-upload-with-react-hook-form/

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