首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 我不能用 useEffect 在 React 中添加类名还是

我在react有一个数独解算项目.我想用react或css来设计它.我两种方法都试过了，结果都搞糊涂了.

enter image description here

这是我的简单CSS代码

    .odd {
      background-color: gray;
    }

还有我的网格.jsx

    import React, { useEffect } from 'react'
    import '../App.css';


    export default function Grid() {
        // for every input make sure only one number per an input field can be entered
        const checkInput = (e) => {
            if (e.target.value.length > 1) {
                e.target.value = e.target.value.slice(0, 1)
            }
        }

        // Driver function for the grid
        const grid = document.querySelectorAll('.grid input')

        useEffect(() => {
            grid.forEach(item => {
                item.addEventListener('input', checkInput)
            })

            return () => {
                grid.forEach(item => {
                    item.removeEventListener('input', checkInput)
                })
            }
        }, [grid])

        // styling for grid element

        
        useEffect(() => {
            const colorChanger = () => {
                grid.forEach((item, i) => {
                    if (
                        ((i % 9 === 0 || i % 9 === 1 || i % 9 === 2) && i < 21) ||
                        ((i % 9 === 6 || i % 9 === 7 || i % 9 === 8) && i < 27) ||
                        ((i % 9 === 3 || i % 9 === 4 || i % 9 === 5) && (i > 27 && i < 53)) ||
                        ((i % 9 === 0 || i % 9 === 1 || i % 9 === 2) && i > 53) ||
                        ((i % 9 === 6 || i % 9 === 7 || i % 9 === 8) && i > 53)
                    ) {
                        item.classList.add('odd')
                    }
                })
            }
            colorChanger()
        }, [grid])

        return (
            <div className='grid'>
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
                <input type="number" min='1' max='9' />
            </div>
        )
    }


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

那么，我怎样才能在图片中获得相同的结果呢？

推荐答案

我建议你使用更标准的react 方法，也就是使用Composition.基本上在你的网格中有cells个，这是最小的组成部分，然后你有9个正方形，这是9个细胞的亚单位.

这是一个完美的构图示例:

const useEffect = React.useEffect
const useState = React.useState

const cells = Array(9)
  .fill("")
  .map((el, i) => i);
const squares = [...cells]

const Cell = () => {
  const [val, setVal] = useState(1);

  const onChange = (e) => setVal(+e.target.value);
  
  return (
    <input
      className="cell"
      type="number"
      min="1"
      max="9"
      onChange={onChange}
      value={val}
    />
  );
};

const Square = ({ type }) => (
  <div className={`square ${type}`}>
    {cells.map((c) => (
      <Cell key={c} />
    ))}
  </div>
);

const Grid = () => (
  <div className="grid">
    {squares.map((el, i) => (
      <Square key={el} type={i % 2 !== 0 ? "light" : "dark"} />
    ))}
  </div>
);


ReactDOM.render(<Grid />, document.getElementById("root"))
.grid {
width: 396px;
height: 396px;
}

.cell {
width:40px;
height:40px;
padding:0;
background:none;
}

.square {
display:inline-block;
width: 132px;
height: 132px;
margin:0;
padding:0;
}

.dark {
background: gray;
}
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

Javascript相关问答推荐

将状态向下传递给映射的子元素

如何在mongoose中链接两个模型？

如何将Openjphjs与next.js一起使用？

你怎么看啦啦队的回应？

使用JQuery单击元素从新弹出窗口获取值

Angular 中的类型错误上不存在获取属性

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法？

未定义引用错误：未定义&Quot；而不是&Quot；ReferenceError：在初始化&Quot；之前无法访问'；a'；

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

如何在使用rhandsontable生成表时扩展数字输入验证？

在我的index.html页面上找不到我的Java脚本条形图

如何在JAVASCRIPT中临时删除eventListener？

如何在FastAPI中为通过file：/URL加载的本地HTML文件启用CORS？

自定义确认组件未在vue.js的v菜单内打开

第一项杀死下一项，直到数组长度在javascript中等于1

Phaser3 preFX addGlow不支持zoom

在范围数组中查找公共(包含)范围

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意？

在执行console.log(new X())时记录一个字符串

带元素数组的Mongo聚合

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630