在 ReactJs 中提交单选表单后如何导航

Question

我尝试构建不同大小的 Tictactoe 游戏，并创建一个游戏菜单来选择要玩的棋盘。但是在使用单选表单选择电路板尺寸后，我对如何重定向或导航开始按钮感到困惑。我只构建两个板尺寸只是为了测试。这是我的代码

Menu.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>
    )
}

我尝试使用 react-router-dom 中的 useNavigate，但导致菜单功能未呈现。我希望使用开始按钮导航到我选择的游戏文件。

Answer 1

您应该在表单内移动按钮，并在触发 onSubmit 事件时进行导航。这是一个使用您提供的代码的小示例。

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>
  );
}