如何解决React Array.map 使用事件渲染多个组件以及如何访问单个组件

这是我的第一个问题。所以问候:)

首先，我正在寻找有关此问题的良好文档或示例。也许，因为我是 reactjs 的新手，有一种我不熟悉的规范方法可以做到这一点。感谢您收到任何相关材料的链接。

所以，我想做的很简单：array.map 渲染这个组件的倍数（一个非常简单的蓝色框），当点击“状态”时它会变成灰色。

我遇到的问题是点击一个框会改变它们！我绝对确定这是一个相当初学者的问题。我已经尝试了很多不同的“ref”实验，或者以某种方式尝试将密钥传递给 statusClick()。

jsx 的第二个标签中有一个 onClick 属性。

它是如何工作的，以便在来自 array.map 的渲染组件中，只有单个框的行为与所描述的一样？

这是（混乱的）代码。

  constructor(props) {
    super(props);
    this.state={colour:'DeepSkyBlue',status: 'active'}
    this.statusClick=this.statusClick.bind(this)
  };
statusClick(){this.state.status==='active' ? this.setState ({colour:'Gray',status:'inactive'}) :this.setState ({colour:'DeepSkyBlue',status:'active'})};
  render(){return(
    namesArray.map((namey,index) =>
    {return (
      <div key={index} style={{backgroundColor:this.state.colour,height:'180px',width:'160px',display:'inline-block',margin:'20px' }}>
      <p style= {{textAlign:'center',color:'white',fontSize:'20px'}}><br/>{namey}<br/> 
      {platArray[index].join()} <br/>  </p>
      <p style= {{textAlign:'center',fontSize:'20px',border:'5px'}} onClick={this.statusClick}>{this.state.status}</p>
      </div>
    )
    }
  )
  )
  };
}```

Thank you very much for any input.

解决方法

问题

您只有一个 background: var(--color-onground),var(--color-onground),var(--color-ground); mask: url(/static/img/2x2black.svg) repeat-x top,url(/static/img/2x2black.svg) repeat-x bottom,none; 值应用于您映射的每个元素，因此当它被切换时，它会为所有元素切换。

解决方案

您应该存储您想要“激活”的元素的地图或字典，并使用替代颜色。

只要 state.color 没有发生变异（即它没有添加或删除项目，也没有排序），那么数组索引就可以用作 React 键。

不是存储颜色或状态，而是存储活动索引的对象。

namesArray

更新 this.state = { // ... other state activeIndices: {},}; 处理程序以使用数组索引。

statusClick

并在映射元素时检查 statusClick = index => { this.setState(prevState => ({ activeIndices: { ...prevState.activeIndices,[index]: !prevState.activeIndices[index],},})); }; 状态以了解要应用的颜色样式。将索引传递给 activeIndices 处理程序

statusClick