Estoy usando react hooks con axios , react-boostrap y tengo dos botones en la misma página, son parte del mismo formulario porque se supone que envían los campos...
lo que estoy tratando de lograr es enviar al usuario a una URL de punto final diferente según el botón en el que se hizo clic en la parte frontal.
Actualmente, el evento onSubmit/onClick no está haciendo nada, lo que significa que el evento no se activa en absoluto, probé los códigos a continuación y también buttonURLState como parámetro a la función handleSubmit (falló primero en el tipo y luego pasé buttonURLState: void ) pero aún no se activa nada.
const [buttonState, setButtonState] = useState(""); ... let buttonURLState: any = null; if (buttonState === "sendToURL1") { buttonURLState = "someURL1"; } if (buttonState === "sendToURL2") { buttonURLState = "someURL2"; } const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); axios.post(`http: //www.foo.com/${buttonURLState}/`, data, options) .then(response => { ... } return .... <Form onSubmit={handleSubmit}> <Form.Label>Name</Form.Label> <Form.Group role="form" controlId="name"> <Form.Control autoFocus required size="lg" className="submit-button-text" type="text" name="name" value={fields.name} onChange={handleFieldChange} /> ... <div> <div> <Button size="lg" variant="secondary" onClick={() => setButtonState("sendToURL1")}>Send Me to URL1</Button> </div> <div> <Button size="lg" variant="primary" onClick={() => setButtonState("sendToURL2")}>Send Me to URL2</Button> </div> </div> </Form> ...PD: no se preocupe por el espacio en la URL del punto final anterior, es una forma de poder publicar la pregunta en este sitio web
¿Hay algo que estoy haciendo mal? Cualquier ayuda para enviar a diferentes puntos finales de URL sería muy apreciada.
Es posible que no necesite la etiqueta de formulario aquí en absoluto. Simplemente llame a una función completamente separada de cada botón:
const goToUrl1 = async () => { const res = await axios.post('foo.com/url1/', { name: fields.name }) console.log(res.data) } const goToUrl2 = async () => { const res = await axios.post('foo.com/url2/', { name: fields.name }) console.log(res.data) } <div> <Button onClick={() => goToUrl1()}>Send Me to URL1</Button> </div> <div> <Button onClick={() => goToUrl2()}>Send Me to URL2</Button> </div>