Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Изменение backgroundcolor DIVa в React (https://javascript.ru/forum/library-toolkit-framework/78936-izmenenie-backgroundcolor-diva-v-react.html)

djekokma 24.11.2019 18:49
Изменение backgroundcolor DIVa в React
 
Случайному DIVу, выбранному с помощью math.random по нажатию button присвоен синий цвет. Как в этом же случайном DIVе по клику мышки изменить цвет на другой (скажем,-зеленый)?
import React, { Component } from 'react';
import'./game.css'
 
export default class Game extends Component {
 
    render() {

       const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6', 'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13', 'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20', 'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];

       const numRandom = () => {
       let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber).style.background = 'blue';
       };
 
        return (
            <div className={'game'}>
                     <div>
                        <button onClick={numRandom}>Play</button>
                    </div>
                
 
                <div>
                    <div className='cell' id='duel1'></div>
                    <div className='cell' id='duel2'></div>
                    <div className='cell' id='duel3'></div>
                    <div className='cell' id='duel4'></div>
                    <div className='cell' id='duel5'></div>
 
                    <div className='cell' id='duel6'></div>
                    <div className='cell' id='duel7'></div>
                    <div className='cell' id='duel8'></div>
                    <div className='cell' id='duel9'></div>
                    <div className='cell' id='duel10'></div>
 
                    <div className='cell' id='duel11'></div>
                    <div className='cell' id='duel12'></div>
                    <div className='cell' id='duel13'></div>
                    <div className='cell' id='duel14'></div>
                    <div className='cell' id='duel15'></div>
 
                    <div className='cell' id='duel16'></div>
                    <div className='cell' id='duel17'></div>
                    <div className='cell' id='duel18'></div>
                    <div className='cell' id='duel19'></div>
                    <div className='cell' id='duel20'></div>
 
                    <div className='cell' id='duel21'></div>
                    <div className='cell' id='duel22'></div>
                    <div className='cell' id='duel23'></div>
                    <div className='cell' id='duel24'></div>
                    <div className='cell' id='duel25'></div>
                </div>
            </div>
        );
    };
}

djekokma 24.11.2019 21:19
Забыл. Нужно удалить 20 строку
Удалил.

рони 24.11.2019 21:38
djekokma,
не знаю react, но примерно строка 22, должна быть
<div onClick={(e) => if (e.target.style.background == 'blue') e.target.style.background = 'green'}>

рони 24.11.2019 21:39
Цитата:
Сообщение от djekokma
Нужно удалить 20 строку
так удалите

рони 24.11.2019 21:53
djekokma,
e.target.style.background = 'green' поправил, было ==

djekokma 24.11.2019 21:58
Цитата:
Сообщение от рони (Сообщение 516101)
djekokma,
не знаю react, но примерно строка 22, должна быть
<div onClick={(e) => if (e.target.style.background == 'blue') e.target.style.background = 'green'}>
Спасибо, но этот вариант не работает.

рони 24.11.2019 22:07
djekokma,
<html>
<head>
    <title></title>
    <style type="text/css">
       .cell{
           height: 50px;
           width: 50px;
           background-color: #FFFF00;
       }
       .game > div{
           width: 250px;
           display: flex;
           flex-wrap: wrap;
       }

    </style>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script type="text/babel">
const { createElement, Component } = React;

class Game extends Component {

    render() {

       const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6', 'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13', 'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20', 'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];

       const numRandom = () => {
       let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber).style.backgroundColor = 'blue';
       };

       const setGreen = (e) =>{
         if (e.target.style.backgroundColor == 'blue') e.target.style.backgroundColor = 'green'
       }
        return (
            <div className={'game'}>
                     <div>
                        <button onClick={numRandom}>Play</button>
                    </div>


                <div onClick={setGreen}>
                    <div className='cell' id='duel1'></div>
                    <div className='cell' id='duel2'></div>
                    <div className='cell' id='duel3'></div>
                    <div className='cell' id='duel4'></div>
                    <div className='cell' id='duel5'></div>

                    <div className='cell' id='duel6'></div>
                    <div className='cell' id='duel7'></div>
                    <div className='cell' id='duel8'></div>
                    <div className='cell' id='duel9'></div>
                    <div className='cell' id='duel10'></div>

                    <div className='cell' id='duel11'></div>
                    <div className='cell' id='duel12'></div>
                    <div className='cell' id='duel13'></div>
                    <div className='cell' id='duel14'></div>
                    <div className='cell' id='duel15'></div>

                    <div className='cell' id='duel16'></div>
                    <div className='cell' id='duel17'></div>
                    <div className='cell' id='duel18'></div>
                    <div className='cell' id='duel19'></div>
                    <div className='cell' id='duel20'></div>

                    <div className='cell' id='duel21'></div>
                    <div className='cell' id='duel22'></div>
                    <div className='cell' id='duel23'></div>
                    <div className='cell' id='duel24'></div>
                    <div className='cell' id='duel25'></div>
                </div>
            </div>
        );
    };
}

ReactDOM.render(<Game />, document.getElementById('root'))

    </script>

</body>
</html>

рони 24.11.2019 22:11
djekokma,
backgroundColor!!! и смотрите код, пост #7

рони 24.11.2019 22:14
:write:
наверняка этот код в целом можно сократить и написать рациональнее.

djekokma 24.11.2019 22:24
Спасибо. Очень хороший Вы человек.

Malleys 25.11.2019 00:42
Цитата:
Сообщение от рони
наверняка этот код в целом можно сократить и написать рациональнее.
Да, можно функции в методе render можно объявить как методы и использовать состояние вместо того, чтобы искать элементы в DOM (как это всё время делают в jQuery). Меня вообще удивило то, что вы ищете элемент, когда вы можете поменять всё, что угодно, это ведь render!

Malleys 25.11.2019 01:05
Примерно так... 
<html>
<head>
	<title></title>
	<style type="text/css">
		.cell{
			height: 50px;
			width: 50px;
			background-color: #FFFF00;
		}
		.game > div {
			width: 250px;
			display: flex;
			flex-wrap: wrap;
		}
	</style>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script type="text/babel">

const { createElement, Component } = React;

class Game extends Component {
	state = {
		randomCell: null,
		greenCells: []
	}

	duel = Array.from(new Array(25), (_, i) => i);

	setGreen = () => {
		this.setState({
			randomCell: null,
			greenCells: this.state.greenCells.concat(this.state.randomCell)
		});
	};

	numRandom = () => {
		const randomCell = Math.floor(25 * Math.random());
		this.setState({ randomCell });
	};

	render() {
		const { randomCell, greenCells } = this.state;
		return <div className="game">
			<div>
				<button onClick={this.numRandom}>Play</button>
			</div>

			<div>{
				this.duel.map(i => {
					const style = {};
					if(greenCells.includes(i))
						style.backgroundColor = "green";
					if(randomCell === i)
						style.backgroundColor = "blue";
					return <div
						className="cell"
						style={style}
						onClick={randomCell === i ? this.setGreen : null}
					></div>
				})
			}</div>
		</div>
	}
}

ReactDOM.render(<Game />, document.getElementById("root"))

    </script>
</body>
</html>

рони 25.11.2019 08:36
Цитата:
Сообщение от Malleys
что угодно, это ведь render!
о великий, если б я знал короткую дорогу, известную тебе, а пока мне ваша фраза ни о чём не говорит, спасибо за пример, жаль не берёте в ученики. :)

djekokma 25.11.2019 10:55
Спасибо

рони 25.11.2019 10:57
react игрушка продолжение
 
:) :write:
сделай поле зелёным!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cell{
            height: 50px;
            width: 50px;
            background-color: #FFFF00;
        }
        .game > div {
            width: 250px;
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script type="text/babel">

const { createElement, Component } = React;

class Game extends Component {
    state = {
        randomCell: null,
        greenCells: new Set()
    }

    duel = Array.from(new Array(25), (_, i) => i);

    setGreen = () => {
        this.setState({
            randomCell: null,
            greenCells: this.state.greenCells.add(this.state.randomCell)
        });

    };

    numRandom = () => {
        const {greenCells} = this.state;
        const freeCell = this.duel.filter(i => !greenCells.has(i))
        const randomCell = freeCell[Math.floor(freeCell.length * Math.random())];
        this.setState({ randomCell });
        clearTimeout(this.timer);
        this.timer = setTimeout(this.numRandom, 1000);
    };

    render() {
        const { randomCell, greenCells } = this.state;
        if(greenCells.size == this.duel.length) return <h1>Game over</h1>;
        return <div className="game">
            <div>
                <button onClick={this.numRandom}>Play</button>
            </div>

            <div>{
                this.duel.map(i => {
                    const style = {};
                    if(greenCells.has(i))
                        style.backgroundColor = "green";
                    if(randomCell === i)
                        style.backgroundColor = "blue";
                    return <div
                        className="cell"
                        style={style}
                        onClick={randomCell === i ? this.setGreen : null}
                    ></div>
                })
            }</div>
        </div>
    }
}

ReactDOM.render(<Game />, document.getElementById("root"))

    </script>
</body>
</html>

djekokma 25.11.2019 11:42
Шикарно. Спасибо Вам, великие Профессора.

SuperZen 25.11.2019 13:28 
import React from 'react'
import './App.css'

const CELL_COUNT = 25

function App() {
  const [cells] = React.useState(Array.from({ length: CELL_COUNT }, (_, i) => i))
  const [randomCell, setRandomCell] = React.useState(null)
  const playClick = () => setRandomCell(parseInt(Math.random() * CELL_COUNT))
  const greenClick = () => setRandomCell(null)

  return (
    <div className="game">
      <div>
        <button onClick={playClick}>Play</button>
      </div>
      <div>
        {cells.map((cell, idx) => <button
          key={cell}
          className={idx === randomCell ? 'cell random' : 'cell'}
          onClick={randomCell && greenClick}
        >{cell}</button>)}
      </div>
    </div>
  )
}

export default App

djekokma 26.11.2019 09:44
SuperZen,
Спасибо большущее


Часовой пояс GMT +3, время: 14:22.