javascript - 如何在不更改所有组件的情况下更改一个 React 组件的样式属性

Question

我一直在尝试在单击特定 React 组件时更改它的一个样式属性，而不更改该组件的每个实例的样式。

我已经阅读了 React 教程并查看了不同的答案，但不确定为什么当我单击其中一个组件时每个组件都会发生变化(如果该术语已关闭，请原谅我)。我已经尝试过像 e.target 这样的方法和其他一些在 jQuery 中有效的方法，但我不断收到错误。

class Maze extends Component{
    constructor(props){
        super(); 
        this.state = {
            colorToChangeMaze: 'orange'
        }
    }
    idk=Array(9).fill(null)
    changeToRed=(e)=>{
        this.setState({
            colorToChangeMaze:'red'})
 }
    changeToBlack=(e)=>{
        this.setState({
            colorToChangeMaze:'black'})}

  render(){
      return (
      <div>
      <button onClick={this.changeToRed}>change To Red</button>
      <button onClick={this.changeToBlack}>change To Black</button>
      {this.idk.map(x=>  <Square onClick={this.changeToBlack} color={this.state.colorToChangeMaze}/>)} 
      </div>
  );}
}

class Square extends Component{
    render(){
        return(
            <div onClick = {this.props.onClick} style={{'height':'80px','width':'80px','backgroundColor':this.props.color,'margin':'0'}}>
            </div>
        )
    }
}

当我点击一个方 block 时，我只想让那个方 block 变成黑色，不是所有的方 block ，而是所有的方 block 。我有点理解为什么我的代码不起作用('onClick' 和 'backgroundColor' 指向相同的状态)，但我想不出有什么办法。任何帮助将不胜感激，谢谢!

Answer 1

所有 <Square />组件正在改变颜色，因为它们都共享相同的状态。

如果您希望每个 Square 独立改变颜色，那么每个 <Square />组件需要管理自己的状态。

让我们探讨如何解决这个问题:

首先，通过赋予它自己的状态来扩展您的 Square 组件。然后，让我们检测是否 isBlack状态属性为真。如果是这样，我们将背景颜色设置为黑色。如果为假，我们将使用我们传递给 Square 组件的 color 的任何颜色。 Prop 。

class Square extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isBlack: false,
    };
  }
  render() {
    const { handleClick, color } = this.props;
    const { isBlack } = this.state;
    return (
      <div onClick={handleClick} style={{height:'80px', width:'80px', backgroundColor: isBlack ? 'black' : color, margin:0 }} />
    )
  }
}