Reactjs 如何仅更改与其引用的组件相对应的属性的状态？

这是当前的层次结构：

App.js:

import React, { Component } from 'react';
import styled from 'styled-components'

const StyledCell = styled.div`
  background-color: ${props => props.color};
  border-radius: 50%;
  margin: 1rem;
  width: 133px;
  height: 100px;
`;


// Give cell its own state from passed down props, and change state based on current color only when CLICKED

class Cell extends Component {

  render() {
    return(
        <StyledCell onClick={this.props.handleClick} color = {this.props.color}>
        </StyledCell>
      )
  }

}

export default Cell;

此父组件中的状态具有以下网格对象：

  grid: [
    [{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" }],
    [{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" }],
    [{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" }],
    [{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" }],
    [{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" },{ color: "lightgray" }]
  ],

此网格向下传递到

GridContainer

，如下所示：

render(){
    return (
      <div className="App">
        <GridContainer grid={this.state.grid} currentColor={this.state.currentColor} handleClick={this.handleClick}/>
      </div>
    );
  }

同样，在

RowContainer

中，通过映射行，并为该数组中的每个对象生成一个单元格：

 {this.props.row.map((cell) => {
            return <Cell cell={cell} color={cell.color} handleClick = {this.props.handleClick} currentColor={this.props.currentColor}/>;
          })}

{this.props.row.map（（单元格）=>{
返回；
})}

Cell.js:

import React, { Component } from 'react';
import styled from 'styled-components'

const StyledCell = styled.div`
  background-color: ${props => props.color};
  border-radius: 50%;
  margin: 1rem;
  width: 133px;
  height: 100px;
`;


// Give cell its own state from passed down props, and change state based on current color only when CLICKED

class Cell extends Component {

  render() {
    return(
        <StyledCell onClick={this.props.handleClick} color = {this.props.color}>
        </StyledCell>
      )
  }

}

export default Cell;

import React，{Component}来自'React'；
从“样式化组件”导入样式化
const StyledCell=styled.div`
背景色：${props=>props.color}；
边界半径：50%；
保证金：1rem；
宽度：133px；
高度：100px；
`;
//从传递的道具中为单元格指定自己的状态，并仅在单击时基于当前颜色更改状态
类单元扩展组件{
render（）{
返回(
)
}
}
导出默认单元格；

我的问题是，当单击单元格并触发App.js中的

handleClick

方法时，我如何指示它仅更改网格中该特定元素的

color

键值对

---

对于这篇冗长的文章，我表示歉意，我尽力使它尽可能简洁。

理想情况下，每个项目都应该有一个唯一的id。您可以使用嵌套索引（例如

网格[2][3]

）来实现这一点，但这并没有那么明确。例如，如果

表格

中的项目

{ color: "lightgrey", id: 123 }

然后在

行中

，您可以创建一个传递id的函数（而不是在每个单元格中声明它）——

你可以回来-

<Cell cell={cell} color={cell.color} handleClick={this.handleClick(cell.id)} currentColor={this.props.currentColor}/>;

---

这样，您只需更改所单击的特定单元格的颜色，同时保持其余单元格与以前相同的状态。

理想情况下，每个项目都应该有一个唯一的id。您可以使用嵌套索引（例如，

网格[2][3]

）执行此操作，但这并不明确。例如，如果

表格

中的项目

{ color: "lightgrey", id: 123 }

然后在

行中

，您可以创建一个传递id的函数（而不是在每个单元格中声明它）——

你可以回来-

<Cell cell={cell} color={cell.color} handleClick={this.handleClick(cell.id)} currentColor={this.props.currentColor}/>;

---

这样，您只需更改所单击的特定单元格的颜色，而其余单元格保持与以前相同的状态。

我建议将单元格参数添加到

handleClick

函数中

{this.props.row.map((cell, index) => (
  <Cell 
     cell={cell} 
     handleClick={this.props.handleClick}
  />;
)}

class Cell extends Component {

  handleClick = () => {
    this.props.handleClick(this.props.cell)
  }

  render() {
    return (
      <StyledCell 
        onClick={this.handleClick} 
        color={this.props.cell.color}
      />;
  )}

}

请注意，使用此方法将为每个单元格创建一个额外的函数

---

如果您只想声明一个函数，则应该考虑将<代码>数据属性< /C> >到<代码> SytLys<代码>（<代码>数据行索引< /代码>和<代码>数据栏索引< /代码>）并使用

event.currentTarget.dataset.rowIndex

和

event.currentTarget.dataset.columnIndex

将它们检索到

handleClick

函数中。我建议将单元格参数添加到

handleClick

函数中

{this.props.row.map((cell, index) => (
  <Cell 
     cell={cell} 
     handleClick={this.props.handleClick}
  />;
)}

class Cell extends Component {

  handleClick = () => {
    this.props.handleClick(this.props.cell)
  }

  render() {
    return (
      <StyledCell 
        onClick={this.handleClick} 
        color={this.props.cell.color}
      />;
  )}

}

请注意，使用此方法将为每个单元格创建一个额外的函数

---

如果您只想声明一个函数，则应该考虑将<代码>数据属性< /C> >到<代码> SytLys<代码>（<代码>数据行索引< /代码>和<代码>数据栏索引< /代码>）并使用

event.currentTarget.dataset.rowIndex

和

event.currentTarget.dataset.columnIndex

将它们检索到

handleClick

函数中。请向我们展示

handleClick

组件的代码，好吗？您能提供

单元格

组件的代码吗？这是您的组件还是来自库的组件？@OlivierBoissé我已经添加了单元格组件代码。@larz handleClick是我要写的，我不知道如何开始。@Andrew好吧，您很幸运！请查看我的答案，如果您有任何问题，请告诉我您能给我们看一下

handleClick

吗？您能提供

单元格

组件的代码吗？这是您的组件还是来自库的组件？@OlivierBoissé我已经添加了单元格组件代码。@larz handleClick是我要写的，我不知道如何开始。@Andrew好吧，您很幸运！看看我的答案，如果你有任何问题请告诉我谢谢！唯一的问题是，这给了我一个“解析错误：意外的标记，预期的”，“关于

“yourNewColor”：cell

Oops错过了结束

}

。更新了我的答案。谢谢！唯一的问题是，这给了我一个“解析错误：意外的标记，预期的”，“关于

“yourNewColor”：cell

Oops错过了结束

}

。更新了我的答案。