如何更改网格中框的颜色

Question

我创建了一个网格，里面有方框，每个方框的 ID 都是方框 + i。但是，当我尝试添加点击功能来更改框的颜色时，它不允许我这样做。这是代码：

function Board() {
    
    var rows = []
    var numrows = 1000;
    for(var i = 0; i < numrows; i++){
        rows.push(<Box id={"box" + i}  tabIndex="0" onClick={
            document.getElementById(`box${i}`).style.backgroundColor = "red"

        } className="box"  />);
    }

    return (
       <GameBoard>
           {rows}
       </GameBoard>
    )
}

导出默认板

Answer 1

Box 上的 onClick 属性应该是一个函数


<Box
 id={"box" + i}
 tabIndex="0"
 onClick={() => {
            document.getElementById(`box${i}`).style.backgroundColor = "red"
        }
 }
 className="box"
/>

PS：不要忘记在实际的 DOM 元素中使用 id 属性，例如在 Box 组件的定义中

const Box = ({id, /*... rest props*/}) => {
   return (
      <div id={id}> {/* assign ID to real DOM node so it's accessible in document.getElementById*/}
       {/* rest of the Box component definition*/}
      </div>
 )
}

Answer 2

您可以在 Box 组件中设置 state 并在本地切换：

const { useState } = React

const Box = (props) => {
  const [boxStyle, setBoxStyle] = useState({})
  
  const toggleBackground = () => {
    if ('background' in boxStyle) {
      setBoxStyle({})
    } else {
      setBoxStyle({'background': 'red'})
    }
  }
  
  return (
    <div className="box" style={boxStyle} onClick={toggleBackground}>{props.id}</div>
  )
}

const GameBoard = (props) => {
  return (
    <div>
      { props.children }
    </div>
  )
}

const Board = () => {
  var rows = []
  var numrows = 10;
  for(var i = 0; i < numrows; i++) {
    rows.push(<Box id={"box" + i} key={`key-${i}`} tabIndex="0" />);
  }
  return (
    <GameBoard>{ rows }</GameBoard>
  )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(<Board />, domContainer);

.box {
  border: 1px solid black;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

建议：

当您使用反应式框架（如 React（或 Vue））时，请尽量避免直接 DOM 操作。这些框架为您做了很多工作，但如果您修改了它们无法跟踪的内容，很容易搞乱它们的流程。

Answer 3

在 React 中不推荐使用 document.getElementById。

下面是您的代码的挂钩表示：

function Row(){
    const [coloured,setColoured] = useState(false);
    const handleClick=()=>{
        setColoured(true)
    }
    return <Box style={coloured?{color:"red"}:null} tabIndex="0" onClick={handleClick} className="box"  />
}

function Board() {
    
    var numrows = 1000;
    var rows = new Array(numrows)

    return (
       <GameBoard>
           {rows.map(()=><Row />)}
       </GameBoard>
    )
}

您可以从反应中导入 useState 即

import React, { useState } from 'react'

如何更改网格中框的颜色

How to change colour of boxes in a grid

html

javascript

grid

onclick

reactjs

建议：