在没有点击事件的情况下，确定元素 id 或在 material ui 按钮基础上模拟点击事件并用字符填充它

Question

我正在编写一个修改后的 TicTacToe 游戏，用户必须在他们选择的方块收到“O”或“X”之前输入正确的答案。我可以在同一台计算机上与两个现场播放器一起正常工作。当我为一个玩家添加对抗自动响应的能力时，我在放置“X”时遇到了麻烦。我可以计算出放置“X”的最佳正方形（行和列），但无法在板上显示它。下面是显示按钮的代码。电路板布局可以是 3 到 10 之间的任意数字的正方形。

我跟踪每个方块的坐标（数据坐标）但不知道如何使用行和列在按钮组中放置一个方块。我没有自动用户的点击事件，但如果有一种方法可以在所选位置模拟点击事件，那么我可以放置“X”，类似于实时用户选择的更新方式。您能否为此提供任何建议？

const boardgui =  board.map((row, rowId) => { 
            const columns = row.map((column, columnId) => (
    
                <Grid key={columnId} item>
                    <ButtonBase > 
                        <Paper
                            onClick={(e) => {
                                clickSquareHandler(e);
                                }}
                            elevation={4}
                            data-coord={rowId + ':' + columnId}
                            className={classes.Paper}>
                            <Icon
                                className={classes.Icon}
                                style={{fontSize: 78}}>
                            </Icon>
                        </Paper>
                    </ButtonBase>
                </Grid>
                ));
                return (
                <Grid
                    key={rowId}
                    className={classes.Grid}
                    container
                    spacing={2}>
                    {columns}

                </Grid>)
           })

Answer 1

我儿子帮我解决了这个问题。两步。

在 jsx 中数据坐标的正下方添加了以下行。

id={"Square" + rowId.toString() + columnId.toString()}

添加了以下代码来更新广场。请注意，要更新的所选方块的位置是用另一种算法确定的。我的问题之一是我认为我需要模拟点击，但事实并非如此。我只需要通过 id 获取元素，获取子元素属性，然后将“X”（即 'close'）分配给 innerHTML。

        let x = selectSquare.x;
        let y = selectSquare.y;
        let squareId = "Square" + x.toString() +  y.toString();
        console.log ("Board - automaticMover - squareId = ", squareId)
        let squareElement = document.getElementById(squareId);
        console.log ("Board - automaticMover - doc = ", squareElement)
        let target = squareElement;
        console.log ("Board - automaticMover - target = ", target)
        let parent =  squareElement.parentElement;
        console.log ("Board - automaticMover - parent = ", parent)
        let child =  squareElement.children[0];
        console.log ("Board - automaticMover - child = ", child)
        board[x][y] = 'X'
        child.innerHTML = 'close';

在没有点击事件的情况下，确定元素 id 或在 material ui 按钮基础上模拟点击事件并用字符填充它

Without a click event, determine element id or simulate a click event on a material ui button base and populate it with a character

user-interface

click

button

getelementbyid

simulate