24.11.2019, 18:49
|
|
Аспирант
|
|
Регистрация: 09.10.2018
Сообщений: 36
|
|
|
Изменение 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:48.
|
|
24.11.2019, 21:19
|
|
Аспирант
|
|
Регистрация: 09.10.2018
Сообщений: 36
|
|
|
Забыл. Нужно удалить 20 строку
Удалил.
Последний раз редактировалось djekokma, 24.11.2019 в 21:49.
|
|
24.11.2019, 21:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
djekokma,
не знаю react, но примерно строка 22, должна быть
<div onClick={(e) => if (e.target.style.background == 'blue') e.target.style.background = 'green'}>
Последний раз редактировалось рони, 24.11.2019 в 21:52.
|
|
24.11.2019, 21:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от djekokma
|
|
Нужно удалить 20 строку
|
так удалите |
|
24.11.2019, 21:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
djekokma,
e.target.style.background = 'green' поправил, было ==
|
|
24.11.2019, 21:58
|
|
Аспирант
|
|
Регистрация: 09.10.2018
Сообщений: 36
|
|
Сообщение от рони
|
djekokma,
не знаю react, но примерно строка 22, должна быть
<div onClick={(e) => if (e.target.style.background == 'blue') e.target.style.background = 'green'}>
|
Спасибо, но этот вариант не работает. |
|
24.11.2019, 22:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
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:10.
|
|
24.11.2019, 22:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
djekokma,
backgroundColor!!! и смотрите код, пост #7
|
|
24.11.2019, 22:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
наверняка этот код в целом можно сократить и написать рациональнее. |
|
24.11.2019, 22:24
|
|
Аспирант
|
|
Регистрация: 09.10.2018
Сообщений: 36
|
|
|
Спасибо. Очень хороший Вы человек.
|
|
|
|
