ChineseChess.js

import React,{useState} from 'react'
import classes from './Promotion.module.css'
import ChineseChessTable from './ChineseChessTable/ChineseChessTable'


const ChineseChess = () => {
    const [carPosition, setCarPosition] = useState({x:0,y:0})
    const [carInputX, setCarInputX] = useState(0)
    const [carInputY, setCarInputY] = useState(0)

    const checkCarValid = (cur,nextX,nextY) => {
        nextX = parseInt(nextX)
        nextY = parseInt(nextY)
        if ((cur.x !== nextX)&&(cur.y !== nextY)){
            window.alert("cat not go there")
            return false
        }
        setCarPosition({x:nextX,y:nextY})
        return true
    }

    return (
        <div>
            <ChineseChessTable Size={{x:10,y:10}} CarPos={carPosition}/>
            <label>移動車 X:</label>
            <input 
                type="text"
                onChange={e=>{setCarInputX(e.target.value)}} 
                value={carInputX}/>
            <label>移動車 Y:</label>
            <input 
                onChange={e=>{setCarInputY(e.target.value)}} 
                value={carInputY}
                type="text"/>
            <button onClick={()=>{
                checkCarValid(carPosition,carInputX,carInputY)}}>Go</button>
        </div>
    )
}

export default ChineseChess