Javascript 表中每个单元格的React js:setState

因此，我试图为每次单击表格单元格设置样式，当我单击其中一个单元格时，它将在第一次单击时高亮显示该单元格，第二次单击时，它将打开一个弹出窗口。我试图使用setstate设置点击次数和类名，但它突出显示并将点击次数设置为td的整个列。到目前为止，我得到的只是一个片段：

class tableView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      countClicked: 0,
      selected: false
    };

handleClickOpen = (val) => {
  if (this.state.countClicked === 0) {
    this.setState({
      selected: true,
      countClicked: 1
    }))
  }
  if (this.state.countClicked === 1) {
    this.setState({
     selected: false
     countClicked: 0,
     setValueOfRow: val /*this is for pop ups*/
   }))


render(){
{data.map((c, i) => (
      <tr key={i}>
         <td className={this.state.selected ? "activeCell" : "default" }>
             <button onClick={() => {
                this.handleClickOpen(c.name);
              }}>
             {c.name ? `${c.name}` : " ? "}
             </button>
         </td>
         <td className={this.state.selected ? "activeCell" : 
          "default" }>
             <button onClick={() => {
                this.handleClickOpen(c.age);
              }}>
             {c.age ? `${c.age}` : " ? "}
             </button>
         </td>
       <td className={this.state.selected ? "activeCell" : 
          "default" }>
             <button onClick={() => {
                this.handleClickOpen(c.email);
              }}>
             {c.email ? `${c.email}` : " ? "}
             </button>
         </td>
      </tr>
}

类tableView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
计数：0，
所选：false
};
handleClickOpen=（val）=>{
如果（this.state.countClicked==0）{
这是我的国家({
选择：正确，
计数：1
}))
}
if（this.state.countClicked==1）{
这是我的国家({
所选：false
计数：0，
setValueOfRow:val/*这是用于弹出窗口的*/
}))
render（）{
{data.map（（c，i）=>(
{
此.handleClickOpen（c.name）；
}}>
{c.name？`${c.name}`:“？”}
{
这个。把手舔开（c.age）；
}}>
{c.age？`${c.age}`:“？”}
{
此.handleClickOpen（c.email）；
}}>
{c.email？`${c.email}`:“？”}
}

您可以将“选定”状态存储为布尔值数组，每个布尔值表示每个单元格的选定状态：

构造函数（道具）{
超级（道具）；
此.state={
选中：新数组（this.props.data.length）.fill（false）
};
}

另外，你的数据数组是空的，所以没有单元格会呈现。我假设数据来自这里的道具

然后在

render（）

中，可以使用：

render(){
{this.propes.data.map((c, i) => (
      <tr key={i}>
         <td className={this.state.selected[i] ? "activeCell" : "default" }>
             <button onClick={() => {
                this.handleClickOpen(i);
              }}>
             {c.name ? `${c.name}` : " ? "}
             </button>
         </td>
      </tr>
}

---

如果希望每个单元格都有单独的状态，则需要一个状态数组。单个变量显然不能存储多个单元格的状态。谢谢！选定的状态可以工作，但如何使其在单击单元格时不影响其他列？而不是检查

此.state.selected

并切换基于类的状态在此基础上，检查

this.state.selected[i]

很抱歉，我的问题可能不清楚，我遵循了您的示例，它工作正常，但当我单击“名称”列中的一个单元格时，相同索引中的其他列（如年龄、电子邮件等）也会使用相同的切换功能突出显示单元格。有没有办法停止此操作？哦，在这种情况下，您需要存储您的<代码>选定的以2D数组表示。老实说，在不知道如何实现cols的情况下，不可能给出更具体的答案。也许打开另一个问题会对您有更大帮助，因为您可以发布代码