在沒有點擊事件的情況下，確定元素 id 或在材質 ui 按鈕基礎上模擬點擊事件並用字符填充它

Question

我正在編寫一個修改后的井字游戲，用戶必須在他們選擇的方塊收到“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

我的兒子能夠為我解決這個問題。 兩步。

1. 在 jsx 中的 data-coord 正下方添加了以下行。

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

2. 添加了以下代碼來更新正方形。 請注意，要更新的選定方塊的位置是用另一種算法確定的。 我的一個問題是我認為我需要模擬點擊，但事實並非如此。 我只需要通過 id 獲取元素，獲取子屬性，然后為 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';