如何使我的div选项卡处于禁用状态，无法单击

Question

当editable设置为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>

下面是我的页面的外观：

​

​

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

谢谢你的帮助。

Answer 1

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

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