reactjs - 仅在一项上设置状态

Question

如何仅在单击的项目上反转或切换状态。到目前为止，所有选项卡类都处于活动状态。但我只需要点击的那个。我正在自学钩子。所以请没有类组件解决方案

  const  App = () => { 
      const tabItems = [
        {
          id:"1",
          tabname: "Unsplash",
          datatab: "unsplash",
          template: <Unsplash/>
        },
        {
          id:"2",
          tabname: "YouTube",
          datatab: "youtube",
          template: <Youtube/>
        },
        {
          id:"3",
          tabname: "Wikipedia",
          datatab: "wiki",
          template: <Wikipedia/>
        },
        {
          id:"4",
          tabname: "DropdownApp",
          datatab: "dropdownapp",
          template: <DropdownApp/>
        },
      ]        

      const [activeTab, setActiveTab] = useState(false)

      const tabs = tabItems.map((tab, i) => {
        return (
          <span
            className={`item ${activeTab ? 'active' : ''}`} 
            key={tab.id}
            data-tab={tab.datatab}
            onClick={() => setActiveTab(!activeTab)}>
            {tab.tabname}
          </span>
        )
      })

      const tabPanels = tabItems.map((tabPanel) => {
        return (
          <div 
            key={tabPanel.id} 
            className={`ui bottom attached tab segment ${activeTab ? 'active' : ''}`}
            data-tab={tabPanel.datatab}>
            {tabPanel.template}
          </div>
        )
      })

      return (
        <div className="App">
          <div className="ui main text" style={{padding: '20px'}}>      
            <div className="ui top attached tabular menu">
              {tabs}
            </div>
            {tabPanels}
          </div>
        </div>
      );
    }

标签： reactjs

Answer 1

您只跟踪选项卡是否被选中，而不是哪个选项卡，因为所有选项卡都有一个状态。您需要跟踪，选择了哪个选项卡：

const  App = () => { 
      const tabItems = [
        {
          id:"1",
          tabname: "Unsplash",
          datatab: "unsplash",
          template: <Unsplash/>
        },
        {
          id:"2",
          tabname: "YouTube",
          datatab: "youtube",
          template: <Youtube/>
        },
        {
          id:"3",
          tabname: "Wikipedia",
          datatab: "wiki",
          template: <Wikipedia/>
        },
        {
          id:"4",
          tabname: "DropdownApp",
          datatab: "dropdownapp",
          template: <DropdownApp/>
        },
      ]        

      const [activeTab, setActiveTab] = useState("") // Track the id

      const tabs = tabItems.map((tab, i) => {
        return (
          <span
            className={`item ${activeTab === tab.id ? 'active' : ''}`} // Check if the tab ids are the same
            key={tab.id}
            data-tab={tab.datatab}
            onClick={() => setActiveTab(tab.id)}> // Save the id instead of a boolean
            {tab.tabname}
          </span>
        )
      })

      const tabPanels = tabItems.map((tabPanel) => {
        return (
          <div 
            key={tabPanel.id} 
            className={`ui bottom attached tab segment ${activeTab === tab.id ? 'active' : ''}`}
            data-tab={tabPanel.datatab}>
            {tabPanel.template}
          </div>
        )
      })

      return (
        <div className="App">
          <div className="ui main text" style={{padding: '20px'}}>      
            <div className="ui top attached tabular menu">
              {tabs}
            </div>
            {tabPanels}
          </div>
        </div>
      );
    }

如果要取消选择选项卡，则需要修改 onClick：

setTab = (id) => {
   setActiveTab(tab => tab === id ? "" : id);
}

并调用它：

<span
   onClick={() => setTab(tab.id)}>