问题描述
这是我的第一个问题。所以问候:)
首先,我正在寻找有关此问题的良好文档或示例。也许,因为我是 reactjs 的新手,有一种我不熟悉的规范方法可以做到这一点。感谢您收到任何相关材料的链接。
所以,我想做的很简单:array.map 渲染这个组件的倍数(一个非常简单的蓝色框),当点击“状态”时它会变成灰色。
我遇到的问题是点击一个框会改变它们!我绝对确定这是一个相当初学者的问题。我已经尝试了很多不同的“ref”实验,或者以某种方式尝试将密钥传递给 statusClick()。
它是如何工作的,以便在来自 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