时间戳

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

user-interface - 在没有点击事件的情况下，确定元素 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>)
           })

标签： user-interfacebuttonclickgetelementbyidsimulate

解决方案

我的儿子能够为我解决这个问题。两步。

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

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

  1. 添加了以下代码来更新正方形。请注意，要更新的选定方块的位置是用另一种算法确定的。我的一个问题是我认为我需要模拟点击，但事实并非如此。我只需要通过 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';

推荐阅读