在 ReactJs 中提交無線電表單后如何導航

Question

我嘗試構建不同大小的 Tictactoe 游戲，並創建一個游戲菜單來選擇要玩的棋盤。 但是在使用無線電表單選擇電路板尺寸后，我對如何重定向或導航開始按鈕感到困惑。 我只構建兩個板尺寸只是為了測試。 這是我的代碼

菜單.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 ，但它導致菜單 function 未呈現。 我希望使用開始按鈕導航到我選擇的游戲文件。

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