Я не могу добавить имя класса в React с помощью useEffect или?

У меня есть проект решателя судоку в реакции. И я хочу стилизовать его с помощью реакции или css. Я попробовал оба способа и в итоге оказался в замешательстве. Компонент сетки является моим основным компонентом, и я хочу оформить доску следующим образом:

А вот мой простой код CSS

    .odd {
      background-color: gray;
    }

И мой Grid.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>

Итак, как я могу добиться того же результата на картинке?

javascript css reactjs use-effect

05.05.2022 21:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Мое первое удивление: почему вы делаете это динамически, если в принципе это что-то очень статичное.

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

  const sudoku = [
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
    [0, 0, 0, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 0, 0, 0],
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
    [1, 1, 1, 0, 0, 0, 1, 1, 1],
  ]

  var inputs = []
  const iterate = [0, 1, 2, 3, 4, 5, 6, 7, 8]

  iterate.forEach((i) =>
    iterate.forEach((j) =>
      inputs.append(
        <input
          type = "number"
          className = {sudoku[i][j] === 1 ? "odd" : ""}
          min = "1"
          max = "9"
        />
      )
    )
  )

  return <div className = "grid">{inputs}</div>
}

Что-то не так . заменили добавление на push и добавили ключ для каждого элемента, но результат по-прежнему нежелателен `inputs.push( <input key = {${i}${j}} type = "number" className = {sudoku[i][j] === 1 ? " нечетный" : ""} мин = "1" макс = "9" /> ) }) })

— 05.05.2022 22:11

Ваше намерение совершенно верно и принято, но в предоставленном вами коде есть множество ошибок. Не могли бы вы исправить свой код? У вас есть +1 от меня заранее, когда вы это сделаете.

— 05.05.2022 22:16

Я добавил второй скриншот приложения в широком ракурсе @catgirlkelly

— 05.05.2022 22:21

.odd { background-color: gray !important; } добавлено !важно и теперь работает ? Спасибо @catgirlkelly @Gabriel Pellegrino

— 05.05.2022 22:31

Извините, я не могу проверить это прямо сейчас... Я внес некоторые изменения, надеюсь, они решат проблемы, которые у него были...

— 05.05.2022 22:34

05.05.2022 22:02

Прямо сейчас это так

  const inputs = [];

  [0, 1, 2, 3, 4, 5, 6, 7, 8].forEach((i) => {
    [0, 1, 2, 3, 4, 5, 6, 7, 8].forEach((j) => {
      inputs.push(
        <input
          key = {`${i}${j}`}
          type = "number"
          className = {sudoku[i][j] === 1 ? "odd" : ""}
          min = "1"
          max = "9"
        />
      )
    })
  })
  return <div className = "grid">{inputs}</div>

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

И когда я его вставляю, добавляется имя класса, но я не вижу изменения цвета фона

05.05.2022 22:19

Ответ принят как подходящий

Я предлагаю вам использовать более стандартный подход React, который заключается в использовании Сочинение. По сути, в вашей Сетке у вас есть клетки, который является наименьшим Компонентом, затем у вас есть 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>

Я также попробую найти лучший подход к этому типу проблем @CesarePolonara

— 05.05.2022 22:38

Я исправил пример для лучшего понимания композиции. Старайтесь не мыслить императивным способом манипулирования DOM при работе с React, попробуйте построить поток, который идет от статических данных (массивов данных) к рендерингу повторно используемых компонентов.

— 05.05.2022 22:44

Делая это с помощью 9 * 9, и ваш трюк с модулем решает проблему с цветом фона. Кроме того, я лучше понимаю повторно используемые компоненты, увидев этот пример. Спасибо @Cesare Polonara

— 05.05.2022 23:02

Рад, что это помогло. Если вы не хотите использовать трюк с модулем, вы можете использовать псевдокласс css :nth-child(even) для стилизации только четных или нечетных дочерних элементов.

— 05.05.2022 23:23

05.05.2022 22:30