我有2个React组件Memory和children MemoryShape
在Memory组件中我有方法newGame,当我点击按钮时将4个随机MemoryShapes设置为紫色,但是当我点击所有形状时,所有形状都是紫色而不是4我想要
import React, { Component } from 'react';
import './memory.css';
import MemoryShape from './MemoryShape';
import randomShape from './helpers/help';
class Memory extends Component {
constructor(props) {
super(props);
this.state = {
memoryshapes: new Array(16).fill(Math.random() * 1321132),
};
this.preInitGame = this.preInitGame.bind(this);
this.newGame = () => {
const [...shapes] = this.state.memoryshapes;
const coloredShapesIndexes = randomShape(4, 15);
coloredShapesIndexes.forEach((value) => {
shapes[value].shape.style.backgroundColor = 'purple';
});
console.log(shapes);
this.setState({ memoryshapes: shapes });
};
}
componentWillMount() {
this.preInitGame();
}
preInitGame() {
let [...memoryshapes] = this.state.memoryshapes;
const data = {
shape: {
style: {
setColor(nextColor) {
this.backgroundColor = nextColor;
},
backgroundColor: 'green',
},
},
};
memoryshapes = memoryshapes.map((value) => {
let newValue = value;
newValue = data;
return newValue;
});
this.setState({ memoryshapes });
}
render() {
const shapes = this.state.memoryshapes.map((value, index) => {
const arrkey = index + value;
return (<MemoryShape
key={arrkey}
tabIndex={index}
backgroundColor={value.shape.style.backgroundColor}
/>);
});
return (
<div>
{shapes}
<br />
<button
style={{
padding: 20,
marginLeft: 300,
}}
onClick={this.newGame}
>
Start Game
</button>
<MemoryShape
tabIndex={-124}
backgroundColor="blue"
/>
</div>
);
}
}
export default Memory;
class MemoryShape extends Component {
constructor(props) {
super(props);
this.state = { backgroundColor: 'green' };
this.changeColor = () => {
};
this.handleKeyDown = () => {
};
}
componentWillReceiveProps(nextProps) {
console.log(nextProps.backgroundColor);
this.setState({ backgroundColor: nextProps.backgroundColor });
}
render() {
return (
<div
className="memory-shape"
onKeyDown={this.handleKeyDown}
onClick={this.changeColor}
role="button"
tabIndex={this.props.tabIndex}
backgroundColor={this.props.backgroundColor}
style={{ backgroundColor: this.state.backgroundColor }}
/>
);
}
}
MemoryShape.propTypes = {
backgroundColor: PropTypes.string,
tabIndex: PropTypes.number.isRequired,
};
MemoryShape.defaultProps = {
backgroundColor: 'transparent',
};
export default MemoryShape;
答案 0 :(得分:2)
确保您在对象数组中拥有唯一属性!刚添加了id属性,一切正常!