React JS实现点击按钮仅显示对应表格并隐藏其他表格的方法

核心思路 #

把原来三个独立的状态变量合并为一个状态，用来记录当前唯一激活的表格类型，这样点击按钮时只需切换这个状态值，就能保证同一时间只显示对应表格组。

具体修改步骤 #

1. 替换多状态为单一状态
   删除原来的三个useState，改用一个状态变量管理当前激活的表格：

// 替换原来的三个useState
const [activeTable, setActiveTable] = useState(null); // null表示初始时无表格显示

2. 修改按钮点击逻辑
   每个按钮点击时，设置activeTable为对应标识；如果点击的是当前已激活的按钮，就重置为null（隐藏所有表格）：

<Col onClick={() => setActiveTable(activeTable === 'stock' ? null : 'stock')}>
  <Button style={{/* 原有样式 */}}>état stock</Button>
</Col>

<Col onClick={() => setActiveTable(activeTable === 'affectation' ? null : 'affectation')}>
  <Button style={{/* 原有样式 */}}>affectation</Button>
</Col>

<Col onClick={() => setActiveTable(activeTable === 'ecartStock' ? null : 'ecartStock')}>
  <Button style={{/* 原有样式 */}}>écart stock</Button>
</Col>

3. 调整表格渲染条件
   把原来基于多个状态的判断，改为判断activeTable是否等于对应标识：

{activeTable === 'affectation' && (
  <AffectaionsTable sessionType={session_type} sessionName={session_name} sessionID={state} />
)}

{activeTable === 'stock' && <StocksTable record={record} sessionID={state}/>}

{activeTable === 'ecartStock' && <EcartStockRes sessionID={state}/>}
{activeTable === 'ecartStock' && <EcartStockComTour sessionID={state}/>}
{activeTable === 'ecartStock' && <EcartStockTechTour sessionID={state}/>}

完整修改后的代码片段 #

import { useState } from 'react';
// 其他导入...

const YourComponent = () => {
  // 单一状态管理激活表格
  const [activeTable, setActiveTable] = useState(null);

  return (
    <Layout>
      <Content
        style={{
          margin: 0,
          backgroundColor: "white",
        }}
      >
        <div
          className="site-layout-background"
          style={{
            padding: 24,
            minHeight: 360,
          }}
        >
          <Home sessionName={session_name} sessionID={state} session_status={session_status}/>
          <div style={{ height: "80vh", margin: "16px" }}>
            <Row
              gutter={[13, 5]}
              justify="center"
              align="top"
            >
              <Col onClick={() => setActiveTable(activeTable === 'stock' ? null : 'stock')}>
                <Button
                  style={{
                    backgroundColor: "#5e89af",
                    color: "white",
                    height: "60px",
                    width: "325px",
                    alignItems: "center",
                  }}
                >
                  état stock
                </Button>
              </Col>

              <Col onClick={() => setActiveTable(activeTable === 'affectation' ? null : 'affectation')}>
                <Button
                  style={{
                    backgroundColor: "#5e89af",
                    color: "white",
                    height: "60px",
                    width: "325px",
                    alignItems: "center",
                  }}
                >
                  affectation
                </Button>
              </Col> 

              <Col onClick={() => setActiveTable(activeTable === 'ecartStock' ? null : 'ecartStock')}>
                <Button
                  style={{
                    backgroundColor: "#5e89af",
                    color: "white",
                    height: "60px",
                    width: "325px",
                    alignItems: "center",
                  }}
                >
                  écart stock
                </Button>
              </Col>
            </Row>
          </div>

          {activeTable === 'affectation' && (
            <AffectaionsTable sessionType={session_type} sessionName={session_name} sessionID={state} />
          )}
        
          {activeTable === 'stock' && <StocksTable record={record} sessionID={state}/>}
          {activeTable === 'ecartStock' && <EcartStockRes sessionID={state}/>}
          {activeTable === 'ecartStock' && <EcartStockComTour sessionID={state}/>}
          {activeTable === 'ecartStock' && <EcartStockTechTour sessionID={state}/>}
        </div>
      </Content>
    </Layout>
  );
};

export default YourComponent;

额外优化（可选） #

如果想让按钮有激活状态样式，可以在按钮的style里加判断：

<Button
  style={{
    backgroundColor: activeTable === 'stock' ? '#3a5f7a' : "#5e89af", // 激活时加深颜色
    color: "white",
    height: "60px",
    width: "325px",
    alignItems: "center",
  }}
>
  état stock
</Button>

内容的提问来源于stack exchange，提问作者mnol