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

Posted 2023-03-06

【中文标题】如何在 React 中取消单击表格单元格

【英文标题】：How to Unclick a Table Cell in React

【发布时间】：2020-12-08 06:53:39

【问题描述】：

我有一个用 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>
        )
    

提前感谢您的帮助！

【参考方案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>

【讨论】：

谢谢，这很有意义！

不客气。这将是您的应用程序向前发展的常见做法。请记住，如果组件 A 和组件 B 需要知道彼此的状态，您可以让 它们的父组件保持该状态并将状态作为 props 传递给两个组件，然后执行一些逻辑。如果该“状态”需要在整个应用程序中持续存在，您可以考虑使用 React Context。

是的，您的回答为我澄清了很多做法。 :)