Trato de construir el juego Tictactoe con diferentes tamaños y creo un menú de juego para elegir qué tablero jugará. Pero tuve problemas con la forma de redirigir o navegar por el botón de inicio después de elegir el tamaño del tablero usando el formulario de radio. Solo construyo dos tamaños de tablero solo para probar. Aquí está mi código
Menú.js:
import React, { Component,useState } from 'react' import { useNavigate } from 'react-router-dom' import Game from './Game' import Game2 from './Game2' export default function Menu() { const [radio, setRadio] = useState(); // let navigate = useNavigate(); return ( <div> <div className='title'> <h1>Tic Tac Toe</h1> </div> <div className='board-options'> <div>Choose Board Size: {radio}</div> <div className="size-options"> <form> <label> <input type="radio" name='size' checked={radio === '3x3'} value='3x3' onChange={(e) => {setRadio(e.target.value)}} /> <img src="./images/grid-3.png" alt="grid-3" /> </label> <label> <input type="radio" name='size' checked={radio === '4x4'} value='4x4' onChange={(e) => {setRadio(e.target.value)}} /> <img src="./images/grid-4.png" alt="grid-4" /> </label> <label> <input type="radio" name='size' checked={radio === '5x5'} value='5x5' onChange={(e) => {setRadio(e.target.value)}} /> <img src="./images/grid-5.png" alt="grid-5" /> </label> <label> <input type="radio" name='size' checked={radio === '6x6'} value='6x6' onChange={(e) => {setRadio(e.target.value)}} /> <img src="./images/grid-6.png" alt="grid-6" /> </label> </form> <button type='submit' id='start'>START</button> </div> </div> </div> ) }Intenté usar useNavigate de react-router-dom pero provocó que la función Menú no se mostrara. Esperaba usar el botón INICIO para navegar a los archivos del juego que elijo.
Debe mover el botón dentro del formulario y podrá navegar cuando se active el evento onSubmit. Aquí hay un pequeño ejemplo usando el código que proporcionó.
import "./styles.css"; import { useState } from "react"; export default function App() { const [radio, setRadio] = useState(); // let navigate = useNavigate(); const _onSubmit = (e) => { e.preventDefault(); console.log("On submit navigate..."); }; return ( <div> <div className="title"> <h1>Tic Tac Toe</h1> </div> <div className="board-options"> <div>Choose Board Size: {radio}</div> <div className="size-options"> <form onSubmit={_onSubmit}> <label> <input type="radio" name="size" checked={radio === "3x3"} value="3x3" onChange={(e) => { setRadio(e.target.value); }} /> <img src="./images/grid-3.png" alt="grid-3" /> </label> <label> <input type="radio" name="size" checked={radio === "4x4"} value="4x4" onChange={(e) => { setRadio(e.target.value); }} /> <img src="./images/grid-4.png" alt="grid-4" /> </label> <label> <input type="radio" name="size" checked={radio === "5x5"} value="5x5" onChange={(e) => { setRadio(e.target.value); }} /> <img src="./images/grid-5.png" alt="grid-5" /> </label> <label> <input type="radio" name="size" checked={radio === "6x6"} value="6x6" onChange={(e) => { setRadio(e.target.value); }} /> <img src="./images/grid-6.png" alt="grid-6" /> </label> <button type="submit" id="start"> START </button> </form> </div> </div> </div> ); }