Estoy creando un formulario usando React y MUI . Quiero evitar que se envíe el formulario cuando el usuario presiona la tecla Intro. Normalmente haría eso con e.preventDefault() , pero de alguna manera eso no funciona. Creo que tiene algo que ver con el componente TextField de MUI.
Aquí hay un ejemplo simple para mi formulario y aquí está
function MyForm() { return ( <form onSubmit={(e) => { e.preventDefault() /* do submit stuff here */ }}> <TextField id="outlined-basic" label="Outlined" variant="outlined" /> <Button type='submit'>Submit</Button> </form> ); }¿Estoy haciendo algo mal aquí?
La función preventDefault en onSubmit del formulario evita que la página se vuelva a cargar y, básicamente, debe escribir otro preventDefault dentro del campo de texto como se muestra a continuación:
<TextField onKeyPress={e => e.key === 'Enter' && e.preventDefault()} />