Reactjs 简单的互动互动平铺图

我正在努力实现有史以来最简单的事情。我有这张地图：

当点击一个瓷砖时，我可以得到索引，从那里我的计划是替换颜色值，让状态改变瓷砖的背景。问题似乎是所有具有相同颜色的瓷砖都变为黑色，而不仅仅是单击的那个

两个组成部分：

// Map.js 

var mapData = [
1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0,0,1,1,1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0,0,1,1,1,  
]

var tileTypes = {
0: { name: 'Sea', color: 'lightBlue' },
1: { name: 'Land', color: 'wheat' },
2: { name: 'Ship', color: 'black' }
}

var temporalTiles=[];


export default class extends React.Component {


constructor(props) {

super(props)

this.state = {
tile: 0,
tiles:[]
  }
}


componentDidMount() {


const numTiles = mapData.length;

for (let y = 0; y < numTiles; y++) {
    const tileId = mapData[y]
    const tileType = tileTypes[tileId]
    temporalTiles.push(tileType);
    this.setState({tiles: temporalTiles})
  }

}



makeBlack() {
var idx= this.state.tile;

console.log(idx);  // tile index 
console.log(temporalTiles[idx].color); // current tile color 

temporalTiles[idx].color = 'black'; // change color

console.log(temporalTiles[idx].color); // did it work ? yes(!)

this.setState({tiles: temporalTiles})

console.log(temporalTiles);
}


handleIndexToState(idx) {

this.setState({tile: idx})

}

render () {

var quickDemo ={
  display:'block',
  textAlign:'center'
}

return ( <div>

  {this.state.tile ? (

    <div>          
      <p style={quickDemo}> Index of clicked cell {this.state.tile}</p>
      <p style={quickDemo}
        onClick={this.makeBlack.bind(this)}>
        Change to black 
      </p>
    </div>
    ) : null
  }

      {this.state.tiles.map((tile,index) =>(

        <Tile
          bgcolor={tile.color}
          key={index}
          position={index}
          onClick={this.handleIndexToState.bind(this, index)}
        />

        ))}

   </div>)
  }}

//Map.js
变量映射数据=[
1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0,0,1,1,1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0,0,1,1,1,  
]
变量tileTypes={
0:{name:'Sea'，color:'lightBlue'}，
1:{名称：'土地'，颜色：'小麦'}，
2:{name:'Ship'，color:'black'}
}
var temporalTiles=[]；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
瓷砖：0，
瓷砖：[]
}
}
componentDidMount（）{
常量numTiles=mapData.length；
for（设y=0；y已单击单元格{this.state.tile}的索引


换成黑色

)：null
}
{this.state.tiles.map（（tile，index）=>(
))}
)
}}

这是父组件，平铺组件如下所示

 // Tile.js 


 export default class extends React.Component {

 render () {

  var bgColor = {
  backgroundColor: this.props.bgcolor ,
  width: '83px',
  height:'83px',
  border:'1px solid rgba(0,0,0,.1)'

  };

  return (

  <div
  onClick={this.props.onClick}
  style={bgColor}>

  {this.props.position}

  </div>


    )
  }
  }

//Tile.js
导出默认类扩展React.Component{
渲染（）{
变量bgColor={
背景颜色：this.props.bgcolor，
宽度：“83px”，
高度：'83px'，
边框：'1px实心rgba（0,0,0,1）'
};
返回(
{this.props.position}
)
}
}

有没有关于我缺少什么的建议？我对react中的其他“管理”策略持开放态度，因为我确信我对这个问题的处理方法非常幼稚。 短暂性脑缺血发作

---

更新：最终目标是保持每个磁贴的颜色处于状态，以便我可以处理它，例如将位置保存到本地存储

您不需要使用

状态

来更改颜色。使用

event.target

获取单击的项目并直接更改css

希望这有帮助

var映射数据=[
1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0,0,1,1,1,
1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0,0,1,1,1,
1, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0,0,1,1,1,
1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0,0,1,1,1,  
]
变量tileTypes={
0:{name:'Sea'，color:'lightBlue'}，
1:{名称：'土地'，颜色：'小麦'}，
2:{name:'Ship'，color:'black'}
}
类扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
此.state={
单击索引：[]
}
}
onClick（i）{
const index=this.state.clickedIndex.slice（）
if（index.indexOf（i）==-1）{//处理重复项
索引推送（i）
this.setState（{clickedIndex:index}）
} 
} 
render（）{
console.log（'clicked Index:'，this.state.clickedIndex）
const nodes=mapData.map（（el，i）=>{
const bg=this.state.clickedIndex.indexOf（i）>-1？“黑色”：tileTypes[el]。颜色
返回这个.onClick（i）}style={{background:bg}}>{i}
})
返回{nodes}
}
}
ReactDOM.render（，document.getElementById（'app'））

.box{
高度：40px；
宽度：40px；
边框：1px纯灰；
浮动：左；
过渡：所有0.2秒缓解；
光标：指针；
}

单击后，是否要将互动程序的颜色更改为黑色？是的，Pranesh Ravi，如果不清楚，很抱歉，但英语不是我的第一语言。我已进一步澄清了我的问题Pranesh@Mr.Pol更新了答案！