reactjs - 如何使我的 div 标签禁用无法点击

Question

当可编辑设置为false时，我试图让我的一些选项卡禁用：

这是我的以下代码：

  const tabs = [
    "Mission",
    "Agreement",
    "Calendar",
    "Managers",
    "Members",
    "Invitees",
    "Applicants",
  ];

<div className="team-management">
  <div className="team-management-tabs-header">
    <div className="team-management-tab-items">
      {tabs.map((tab, index) => (
        <div
          className={
            activeTab === index
              ? "team-management-tab-item selected"
              : "team-management-tab-item"
          }
          key={tab}
          role="button"
          tabIndex={tab}
          onKeyPress={() => {
            return;
          }}
          onClick={() => setActiveTab(index)}
        >
          <span className="tab-item-text">{tab}</span>
          <span className="tab-item-indicator" />
        </div>
      ))}
    </div>
  </div>

<div className="team-management-tab-panes">
        {tabs[activeTab] === "Mission" && (
          <Mission
            editable={editable}
            teamId={teamId}
            teamData={teamData}
            fetchTeamData={fetchTeamData}
          />
        )}

    ...

      </div>

这是我的页面的样子：

在这种情况下，如何将禁用添加到我的 div？

谢谢你的帮忙。

标签： reactjs

Answer 1

如果可编辑是一种状态，那么您可以根据可编辑状态有条件地选择触发 setActiveTab() 函数（考虑到该函数启用您的选项卡并且您希望它禁用）。

onClick={() => if(editable)setActiveTab(index)}