Quiero representar una nueva tabla después del evento onClick() en un grupo de botones. Se supone que la mesa es más grande o más pequeña según el botón en el que se haga clic, lo que representa el nivel de dificultad de un juego. Usé dos estados: "seleccionado" y "dificultad". El primero permite que la aplicación redirija a la ruta "/ juego" si se ha hecho clic en un botón; el segundo solo realiza un seguimiento del botón seleccionado y le dice cuánto más grande sería la tabla. No sé cómo modificar la dificultad con el valor adecuado (1 para "fácil", 3 para "difícil") en setDifficulty(selected_button) después de llamar a handleSubmit en la función onClick(). Este es mi DifficultButtons.js:
const handleClick = (event) => { event.preventDefault(); setSelected(true); //here i want to use setDifficulty(selected_button) } return ( <> {selected ? <Link to={{ pathname: '/game', state: {level : difficulty} }} /> : <ButtonGroup size="lg" className="d-grid gap-3 below-nav"> <Row className='main-font'>choose difficulty:</Row> <Button variant="warning" size="lg" active level={1} onClick={handleSubmit>very Easy</Button>{' '} <Button variant="warning" size="lg" active level={2} onClick={handleSubmit}>easy</Button>{' '} <Button variant="warning" size="lg" active level={3} onClick={handleSubmit)}>Medium</Button>{' '} </ButtonGroup> }Luego, en GameTable.js, usaría setLocation() para tomar el estado y representar una tabla.
Sin ver la implementación de ButtonGroup y Button , una manera fácil sería cambiar el nivel de dificultad en el controlador de clics.
Actualice handleClick para procesar un argumento de difficulty y devolver la función de controlador am onClick . Esto cierra en el alcance de devolución de llamada un valor de dificultad para pasar a la función de actualización de estado.
const handleClick = (difficulty) => (event) => { event.preventDefault(); setSelected(true); setDifficulty(difficulty); }; Invoque handleClick y pase el nivel de dificultad apropiado. Esto cierra sobre el valor de dificultad pasado y devuelve la devolución de llamada onClick para adjuntar el controlador onClick del botón.
return ( <> {selected ? ( <Link to={{ pathname: '/game', state: { level : difficulty } }} /> ) : ( <ButtonGroup size="lg" className="d-grid gap-3 below-nav"> <Row className='main-font'>choose difficulty:</Row> <Button variant="warning" size="lg" active level={1} onClick={handleSubmit(1)} > very Easy </Button> <Button variant="warning" size="lg" active level={2} onClick={handleSubmit(2)} > easy </Button> <Button variant="warning" size="lg" active level={3} onClick={handleSubmit(3)} > Medium </Button> </ButtonGroup> )} </> );