React js：为表格中的每个单元格设置状态

Question

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

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>
}

Answer 1

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

constructor(props) {
    super(props);
    this.state = {
      selected: new Array(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>
}

注意：将i 传递给handleClickOpen() 并使用this.state.selected[i] 切换类

然后在handleClickOpen():

handleClickOpen = (index) => {
   let newSelected = this.state.selected;
   newSelected[index] = !newSelected[index];
   this.setState({
      selected: newSelected
   });
}