Tengo estos campos que quiero aclarar después del envío. Los otros campos que se indicaron aquí se aclaran, excepto el número. ¿Por qué sucede esto y cómo lo soluciono? Cualquier ayuda sería apreciada. Gracias.
Número de campo de texto:
const [number, setNumber] = useState(""); const handleNumber = (evt) => { const num = evt.target.validity.valid ? evt.target.value : number; setNumber(num); }; <TextField type="number" pattern="[0-9]*" variant="outlined" label="Phone Number" fullWidth onChange={handleNumber} required inputProps={{ maxLength: 11, }} InputProps={{ disableUnderline: true, }} />Aclarando los estados:
const clearInfo = () => { //other fields here setFirstName(""); setLastName(""); setNumber(""); };Envío:
const handleSubmit = async (e) => { e.preventDefault(); try { //codes here }); updateData(); clearInfo(); } catch (err) { console.log(err); } setOpen(true); //for the Alert }; Actualización: intenté configurar setNumber() y todavía no se aclara
Su TextField actualmente no está controlado porque no tiene una propiedad de value . Eso significa que cuando cambia number , no tiene efecto en TextField , porque el contenido de TextField no está controlado por su código. Para controlarlo, agregue value={number} a él. Entonces, clearInfo funciona correctamente:
const { useState } = React; const { TextField } = MaterialUI; const Example = () => { const [number, setNumber] = useState(""); const handleNumber = (evt) => { const num = evt.target.validity.valid ? evt.target.value : number; setNumber(num); }; const clearInfo = () => { //other fields here // setFirstName(""); // setLastName(""); setNumber(""); }; const handleSubmit = (e) => { e.preventDefault(); try { //codes here // updateData(); clearInfo(); } catch (err) { console.log(err); } // setOpen(true); //for the Alert }; return <form onSubmit={handleSubmit}> <TextField type="number" pattern="[0-9]*" variant="outlined" label="Phone Number" fullWidth onChange={handleNumber} value={number} required inputProps={{ maxLength: 11, }} InputProps={{ disableunderline: "true", // *** Changed case and value per error from React }} /> <button>Submit</button> </form>; }; ReactDOM.render(<Example />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@mui/material@5.5.0/umd/material-ui.development.js"></script>Tuve que hacer otros dos cambios allí (aparte de comentar las funciones faltantes, etc.) para que el fragmento funcionara sin errores:
Eliminé el async de handleNumber porque no tenía ninguna await y, lamentablemente, los fragmentos de pila que usan JSX no son compatibles con async / await (porque usan una versión muy antigua de Babel; vote para arreglar eso aquí ).
React registró una advertencia sobre disableUnderline: true en InputProps diciendo (en efecto) para que se disableunderline: "true" en su lugar, así que lo hice.