Tengo un formulario hecho con React Bootstrap para enviar simplemente una cadena que se guardará en una base de datos. Funciona y el mensaje enviado se guarda, pero no sé cómo borrar el área de texto cuando se envía el mensaje.
Como puede ver, lo que intenté hacer fue usar el enlace useState para establecer un valor vacío, pero después de enviar el formulario, la cadena aún está visible en el área de texto. ¿Hay alguna manera de hacer esto?
const Form = (props) => { const [isLoading, setLoading] = useState(false); const [value, setValue] = useState(props.value); const handleSubmit = async event => { setLoading(true); event.preventDefault(); const res = await fetch( // here I call the api ) result = await res.json(); setValue(null); setLoading(false); }; return ( <Form onSubmit={handleSubmit}> <Form.Group className="mb-3" controlId="text"> <Form.Control as="textarea" required type="text" placeholder="" defaultValue={value} /> </Form.Group> <Button variant="primary" type="submit" disabled={isLoading} > {isLoading ? 'Saving...' : 'Save'} </Button> </Form> ) } export default Form;En mi opinión, su área de texto actualmente no está controlada , por lo que los cambios realizados en el value no se actualizarán en el componente Form.Control.
<Form.Control as="textarea" rows={3} value={value} onChange={e => { setValue(e.target.value); } /> En lugar de usar la propiedad defaultValue , probablemente usaría setValue(props.value) para restablecer el value en su función de controlador.
Quitar valor de accesorios: el componente de formulario debe mantener este estado. Luego, para una entrada controlada, debe cambiar "valor predeterminado" a "valor" en Form.Control. También agregue onChange y establezca el valor. En el envío del formulario, puede establecer su estado de valor en una cadena vacía, no nula: