动态更改颜色ReactJS

Question

好吧，我对React还很陌生，所以这是我的问题。。。。我确实成功地动态渲染了5个球组件，我想实现的是，每次我单击球时，球都会改变颜色，并保持这种状态，直到再次单击该球时，它恢复到默认颜色。还可以更改多个球的颜色，例如更改1 3 5的颜色，但当再次单击它们时，会再次恢复到默认颜色。。。有什么想法吗？

.Ball {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #3d3c3a;
border-radius: 100%;
float: left;
background-color: #fff;
margin: 20px;
font-weight: 500;
box-shadow: 1px 1px 0.5px #000;
align-items: center;
cursor: pointer
}
const balls = props => {
return (
<Aux>
<p className={classes.Ball} id={props.id} onClick={props.clicked}>
{props.number}
</p>
</Aux>
);
};
class Game extends Component {
state = {
ids: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 }
],
chosenBallsIds: []
};

clickedBallHandler = ballIndex => {
let chosenBallsIds = this.state.chosenBallsIds;
if (chosenBallsIds.includes(ballIndex)) {
let index = chosenBallsIds.indexOf(ballIndex);
if (index > -1) {
chosenBallsIds.splice(index, 1);
}
} else {
chosenBallsIds.push(ballIndex);
}
if (chosenBallsIds.length >= 9) {
chosenBallsIds.pop();
}
chosenBallsIds.sort(function(a, b) {
return a - b;
});
this.setState({
chosenBallsIds: chosenBallsIds
});
};

render() {
let balls = null;
balls = (
<div>
{this.state.ids.map((ball, index) => {
return (
<Balls
key={ball.id}
number={ball.id}
clicked={() => this.clickedBallHandler(index + 1)}
id={index + 1}
/>
);
})}
</div>
);

return (
<Aux>
<div className={classes.Balls}>{balls}</div>
</Aux>
);
}
}
export default Game;

Answer 1

您可能需要了解动态属性。这将允许您为每次单击设置不同的背景颜色。此外，我会考虑设置一个十六进制颜色的数组，然后当用户单击时，您可以根据需要将状态设置为数组中的新项。你的if语句很复杂，可能不需要。