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>
        )
    }
}

当我单击一个正方形时，我只希望那个正方形变为黑色，而不是所有正方形，而是所有正方形都可以。我有点理解为什么我的代码无法正常工作（“ onClick”和“ backgroundColor”指向相同的状态），但是我想不出任何可行的方法。任何帮助将不胜感激，谢谢！

Answer 1

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

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

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

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

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 }} />
    )
  }
}

如何在一个React组件上更改样式属性而又不全部更改

1 个答案: