Изменение 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>
);
};
}
|
Забыл. Нужно удалить 20 строку
Удалил. |
djekokma,
не знаю react, но примерно строка 22, должна быть
<div onClick={(e) => if (e.target.style.background == 'blue') e.target.style.background = 'green'}>
|
Цитата:
|
djekokma,
e.target.style.background = 'green' поправил, было == |
Цитата:
|
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>
|
djekokma,
backgroundColor!!! и смотрите код, пост #7 |
:write:
наверняка этот код в целом можно сократить и написать рациональнее. |
Спасибо. Очень хороший Вы человек.
|
| Часовой пояс GMT +3, время: 07:07. |