如何在 React 中取消单击表格单元格

Question

我有一个用 React 构建的表。如果我点击一个单元格，我希望能够为它着色，如果我点击另一个单元格，我希望它能够取消着色（新的单元格会被着色）。

当我单击单元格时，我可以成功地为它们着色，但我不确定如何取消它们的颜色，因为单元格对象不知道何时单击了不同的单元格。 （不过，我想不出行/表格对象中的任何内容。）因此，如果我多次单击，我最终会得到一堆彩色单元格，而不是一个。

这是我的手机密码：

class Cell extends React.Component {

    state = {
        bgColor: 'inherit'
      }

    handleClick = (columnId) => {
        this.setState({
            bgColor: "blue"
        })
    }

    render() {

        const content = this.props.content;

        return (
            <td
                onClick={()=> this.handleClick()}
                style={{backgroundColor: this.state.bgColor}}
            >
                {content}
            </td>
        )
    }
}

提前感谢您的帮助！

Answer 1

当我单击单元格时，我可以成功地为单元格着色，但我不确定 如何使它们脱色，因为单元格对象不知道何时 点击了不同的单元格

您需要一个单一的事实来源，以便您的组件知道谁是活跃的。在下面的示例中，我将activeCell 状态放在父组件App 上，这样它就可以保存谁处于活动状态的真实值。根据需要将道具传递给Cell，以便在点击时更新新的activeCell

class Cell extends React.Component {
  render() {

    const content = this.props.content;

    return (
      <td
          onClick={()=>{this.props.handleChangeActiveCell(this.props.identifier)}}
          style={{backgroundColor: this.props.activeCell === true ? this.props.bgColor : 'inherit'}}
      >
          {content}
      </td>
    )
  }
}

class App extends React.Component {

  state = {
    bgColor: "blue",
    activeCell: -1
  }
  
  handleChangeActiveCell = (key) => {
    this.setState({
      activeCell: key
    });
  }

  render(){
    return(
      <React.Fragment>
        <table>
          <tr>
            <Cell 
              identifier={0} 
              handleChangeActiveCell={this.handleChangeActiveCell} 
              activeCell={this.state.activeCell === 0 ? true : false} 
              bgColor={this.state.bgColor} 
              content={`sample_content`}
            />
            
            <Cell 
              identifier={1} 
              handleChangeActiveCell={this.handleChangeActiveCell} 
              activeCell={this.state.activeCell === 1 ? true : false} 
              bgColor={this.state.bgColor} 
              content={`sample_content`}
            />
          </tr>
        </table>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

td {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>