import React, { Component } from 'react';
import ColorBox from './ColorBox'
import './ColorBoxes.css'
class ColorBoxes extends Component {
state = {
colors: {}
}
clickedColor = (color) => {
let newColor = this.randomColorGenerator()
if (color !== newColor) {
console.log('i am changing state', newColor)
console.log(color, 'i am current color')
console.log(this.state.colors)
const {colors} = this.state
this.setState({
colors: {
...colors,
[color]: newColor
}
})
}
}
randomColorGenerator = () => {
let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16)
return randomColor
}
renderColors = () => {
let colors = []
colors = Object.keys(this.state.colors)
return colors.map(c =>
<div key={c}><ColorBox color={c} clickedColor={this.clickedColor}/></div>)
}
componentDidMount() {
let colorKey
let colors = {}
for(let i=0; i < 21; i++) {
colorKey = this.randomColorGenerator()
colors[colorKey] = colorKey
}
this.setState({ colors: colors });
}
render() {
return (
<div className="ColorBoxes">
{this.renderColors()}
</div>
);
}
}
export default ColorBoxes;
子组件
import React from 'react';
import './ColorBox.css'
const ColorBox = (props) => {
return <div className='ColorBox'
style={{backgroundColor: `${props.color}`}}
onClick={() => props.clickedColor(props.color)}>
{props.color}
</div>
}
export default ColorBox;
编辑,我已经尝试了提出的解决方案,但是状态是根据react开发人员工具更新的,但是组件没有重新渲染。我怀疑密钥也必须更改才能重新渲染,但我不知道该如何在状态下进行渲染 我想做的就是拿旧密钥,并用要更新的相同颜色替换它。
我有这个处于状态的颜色对象,它持有键:颜色值对,例如颜色:{#fff:#fff,#bbb:#bbb}。我将一个函数传递给子组件,以便当我单击一种颜色时,它将返回该颜色,这是我在状态对象中的键,然后我想找到该键并将该键值更新为新的随机颜色,将被选择。我无法访问该密钥。我怎么做?理想情况下,我可能希望删除该键,并在状态对象中将键和值更新为相同。
答案 0 :(得分:2)
您缺少color
的括号。您需要使用方括号在对象上设置动态键:
this.setState(prevState => ({
...prevState.colors,
[color]: newColor,
}));
希望这会有所帮助!
答案 1 :(得分:2)
假设您的状态如下:
colors: {
#fff: '#fff',
#000: '#000'
}
然后只需将您的setState
更新为
const {colors} = this.state
setState({
colors: {
...colors,
[color]: newColor
}
})
问题是您要在color对象之外附加新的color状态
答案 2 :(得分:1)
您可以这样操作:
class ColorBoxes extends Component {
state = {
colors: {}
}
clickedColor = (color) => {
let newColor = this.randomColorGenerator()
if (color !== newColor) {
console.log('i am changing state', newColor)
console.log(color)
console.log(this.state.colors.color)
let newColors = {...this.state.colors};
newColors.color = newColor;
this.setState({ colors: newColors })
}
}