如何根据选中的分类按钮动态修改JS表格内按钮的文本与功能？

核心思路 #

用React状态跟踪当前选中的分类（Upcoming/Past），根据状态动态切换表格按钮的文本和点击事件。

具体实现步骤 #

1. 添加状态管理：在组件里用useState定义一个状态变量，比如currentView，用来记录当前是“即将到来”还是“已完成”视图。
2. 更新按钮点击逻辑：修改handleUpcoming和handlePast函数，点击时更新currentView的状态值。
3. 动态渲染表格按钮：在表格的最后一列，根据currentView的值来决定按钮的显示文本和触发的函数。

修改后的完整代码示例 #

import { useState } from 'react';

function Appointments() {
  const [currentView, setCurrentView] = useState('upcoming'); // 初始设为即将到来视图
  const [accounts, setAccounts] = useState([]); // 存储Firestore拉取的预约数据

  // 切换到Upcoming视图并加载对应数据
  const handleUpcoming = () => {
    setCurrentView('upcoming');
    // 这里补充从Firestore获取即将到来预约的逻辑
    // 示例：fetchUpcomingAppointments().then(data => setAccounts(data))
  };

  // 切换到Past视图并加载对应数据
  const handlePast = () => {
    setCurrentView('past');
    // 这里补充从Firestore获取已完成预约的逻辑
    // 示例：fetchPastAppointments().then(data => setAccounts(data))
  };

  // 取消预约逻辑
  const handleCancel = (studentNumber) => {
    // 补充Firestore更新预约状态的代码，比如标记为已取消
    console.log('取消预约：', studentNumber);
  };

  // 查看预约详情逻辑
  const handleView = (studentNumber) => {
    // 补充查看详情的逻辑，比如打开模态框或跳转详情页
    console.log('查看预约：', studentNumber);
  };

  return (
    <div className="app-container">
      <h1>Appointments</h1>
      <div className="button-container">
        <button onClick={handleUpcoming}>Upcoming</button>
        <button onClick={handlePast}>Past</button>
        <div className="scrollbar">
          <table>
            {accounts && accounts.map(account => (
              <tr key={account.studentNumber}> {/* 必须添加key避免React渲染警告 */}
                <td className="appointmentDataOne">
                  {account.name}
                  <div className="appointmentDataTwo">{account.email}</div>
                </td>
                <td className="appointmentDataOne">{account.schedule}</td>
                <td className="appointmentDataTwo">{account.service}</td>
                <td className="appointmentDataTwo">{account.mobileNumber}</td>
                <td>
                  {/* 根据当前视图动态切换按钮 */}
                  {currentView === 'upcoming' ? (
                    <button onClick={() => handleCancel(account.studentNumber)}>取消预约</button>
                  ) : (
                    <button onClick={() => handleView(account.studentNumber)}>查看预约</button>
                  )}
                </td>
              </tr>
            ))}
          </table>
        </div>
      </div>
    </div>
  );
}

export default Appointments;

关键细节说明 #

• 状态currentView是核心开关，直接控制按钮的显示文本和触发函数。
• 列表渲染时必须给<tr>添加唯一key，这是React的强制规范，能提升渲染性能并避免警告。
• 你需要补充Firestore数据拉取的具体逻辑，确保切换视图时加载对应分类的预约数据。
• handleView函数可根据需求扩展，比如弹出详情弹窗、跳转至详情页面等。

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