Entonces, en este componente, tengo un botón llamado Enviar que, cuando se hace clic, realizará las siguientes operaciones: exportará el dibujo que el usuario ha hecho como una URL jpeg, lo pasará a otra API que devuelve una leyenda de imagen, luego compara esta imagen subtítulo a un indicador de cadena que se devolvió antes. Me gustaría redirigir al usuario a otra página web en función de si la comparación entre el título de la imagen y el aviso fue la misma o no. ¿Cómo haría esto?
<button onClick={() => { let W = this.handleWord() let valid = this.state.valid this.canvas.current.exportImage("jpeg") .then(imagedata => { fetch('https://hf.space/embed/Salesforce/BLIP/+/api/predict/', { method: "POST", body: JSON.stringify({"data":[imagedata,"Image Captioning","None","Beam Sampling"]}), headers: { "Content-Type": "application/json" } }) .then(function(response) { return response.json(); }) .then(function(json_response) {blip = json_response.data valid = blip.includes(W) //blip which is a string returned by the api above is checked to see if W is in the string console.log(valid) //based on this valid boolean, i want to have page be redirected to either Success or Share, two seperate pages ive made }) }) .catch(e => { console.log(e); }); }} className='buttonprops'> <img src={submitbutton} width = {120} height = {35} alt = 'Submit!' /> </button>const YourComponent = () => { // if you're using react-router... const navigate = useNavigate(); // import { useNavigate } from 'react-router-dom' const handleClick = () => { // your button click logic... navigate(valid ? "/success" : "/share") // or if you're not using react-router... window.location.pathname = valid ? "/success" : "/share" } return <button onClick={handleClick}>click me</button> }