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

问题描述

我正在编写一个修改过的井字游戏，用户必须在他们选择的方格收到“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>)
           })

解决方法

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

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

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

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

        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';