Tengo un botón y 2 campos de entrada y estoy enviando estos valores de campo de entrada al backend. etc haciendo algunas operaciones. Después de realizar operaciones en la función addCustomer, quiero restablecer los campos de entrada pero no funciona. Aquí está el código:
function TableFooterPanel(props) { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const addNewCustomer = async (name, surname) => { await service.addCustomer(name, surname); props.funcParam(); setFirstName(''); setLastName(''); } var isButtonDisabled = false; (firstName.length <= 3 || lastName.length <= 3) ? isButtonDisabled = true : isButtonDisabled = false; return ( <> <Card className='buttonFooter'> <Form className='buttonFooter'> <input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input> <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input> <Button disabled={isButtonDisabled} onClick={() => addNewCustomer(firstName, lastName)} className='addButton'>Add</Button> <label hidden={!isButtonDisabled} className='labelStyle'>Field lengths must be at least 4 character</label> </Form> </Card> </> ); } export default TableFooterPanel;Aquí todo funciona bien excepto
setFirstName(''); setLastName('');no se están restableciendo o configurando en otro valor. ¿Cuál es la razón de eso y cómo puedo lograrlo?
El problema es que está configurando la propiedad de valor predeterminado y no la propiedad de valor.
<input type="text" placeholder="First Name" value={firstName} onChange={e => setFirstName(e.target.value)} /> <input type="text" placeholder="Last Name" value={lastName} onChange={e => setLastName(e.target.value)} />De documentos: https://reactjs.org/docs/forms.html#related-components
Tal vez podría usar un enlace de estado para rastrear la respuesta del servidor.
Si la respuesta es válida, devuélvalo verdadero y active la función de reinicio de campos de texto
Sin ver su código de servicio, no estoy seguro de poder garantizar al 100 % ninguno de estos consejos. Pero me parece que deberías estar haciendo ese trabajo en .then() o .finally()
por ejemplo:
const addNewCustomer = async (name, surname) => { await service.addCustomer(name, surname) .then(() => { props.funcParam(); setFirstName(''); setLastName(''); }) };También puede hacer esto en un .finally si desea ejecutarlo independientemente de los resultados del servidor.