如何在點擊反應js時添加活動class

Question

我已經閱讀並嘗試了許多解決方案，但我是 React 新手，我無法弄清楚如何在單擊 div 時添加 class {s.highlighted}。 有人可以向我解釋一下嗎？ 這是我的代碼，但不是我寫的。 我更喜歡在單擊時將 {s.highlighted} 添加到“ListItem”，並將其從之前處於活動狀態的元素中刪除。

看起來以前的開發人員開始做某事，但它不能正常工作。 目前只有“測試助手”鏈接始終突出顯示。 這段代碼有什么問題？

const useStyles = makeStyles((theme) =>
  createStyles({
    link: {
      textDecoration: 'none',
      color: theme.palette.grey[900],
    },
    highlighted: {
      backgroundColor: lighten(green[500], 0.5),
    },
  })
)

// eslint-disable-next-line
//@ts-nocheck
export const MenuItems: React.FC = () => {
  const s = useStyles()

  return (
    <div>
      <Link to="/dashboard/proxies" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <CloudDone />
          </ListItemIcon>
          <ListItemText primary="Proxies" />
        </ListItem>
      </Link>

      <Link to="/dashboard/permissions" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <VerifiedUser />
          </ListItemIcon>
          <ListItemText primary="Permissions" />
        </ListItem>
      </Link>

      <Link to="/dashboard/test-helpers" className={classnames(s.link)}>
        <ListItem className={s.highlighted}>
          <ListItemIcon>
            <Help />
          </ListItemIcon>
          <ListItemText primary="Test Helpers" />
        </ListItem>
      </Link>

      <Link to="/dashboard/plans" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <FormatListNumbered />
          </ListItemIcon>
          <ListItemText primary="Plans" />
        </ListItem>
      </Link>

      <Link to="/dashboard/user-management" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <Person />
          </ListItemIcon>
          <ListItemText primary="User Management" />
        </ListItem>
      </Link>

      <Link to="/dashboard/activate-subscription" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <PersonAdd />
          </ListItemIcon>
          <ListItemText primary="Activate Subscription" />
        </ListItem>
      </Link>

      <Link to="/dashboard/user-plan-limits" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <BarChartIcon />
          </ListItemIcon>
          <ListItemText primary="User Plan Limits" />
        </ListItem>
      </Link>
    </div>
  )
}

Answer 1

一個天真的解決方案可能是這樣的。 不要忘記從 React 導入 'useState' 鈎子。 您需要跟蹤 state 中的活動項目。

const useStyles = makeStyles((theme) =>
      createStyles({
        link: {
          textDecoration: 'none',
          color: theme.palette.grey[900],
        },
        highlighted: {
          backgroundColor: lighten(green[500], 0.5),
        },
      })
    )
    
    // eslint-disable-next-line
    //@ts-nocheck
    export const MenuItems: React.FC = () => {
      const s = useStyles()
      const [activeItemIndex, setActiveItemIndex] = useState(0)

      return (
        <div>
          <Link to="/dashboard/proxies" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(0)} className={activeItemIndex === 0 ? s.highlighted : null}>
              <ListItemIcon>
                <CloudDone />
              </ListItemIcon>
              <ListItemText primary="Proxies" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/permissions" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(1)} className={activeItemIndex === 1 ? s.highlighted : null}>
              <ListItemIcon>
                <VerifiedUser />
              </ListItemIcon>
              <ListItemText primary="Permissions" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/test-helpers" className={classnames(s.link)}>
            <ListItem onClick={() => setActiveItemIndex(2)} className={activeItemIndex === 2 ? s.highlighted : null}>
              <ListItemIcon>
                <Help />
              </ListItemIcon>
              <ListItemText primary="Test Helpers" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/plans" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(3)} className={activeItemIndex === 3 ? s.highlighted : null}>
              <ListItemIcon>
                <FormatListNumbered />
              </ListItemIcon>
              <ListItemText primary="Plans" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/user-management" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(4)} className={activeItemIndex === 4 ? s.highlighted : null}>
              <ListItemIcon>
                <Person />
              </ListItemIcon>
              <ListItemText primary="User Management" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/activate-subscription" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(5)} className={activeItemIndex === 5 ? s.highlighted : null}>
              <ListItemIcon>
                <PersonAdd />
              </ListItemIcon>
              <ListItemText primary="Activate Subscription" />
            </ListItem>
          </Link>
    
          <Link to="/dashboard/user-plan-limits" className={s.link}>
            <ListItem onClick={() => setActiveItemIndex(6)} className={activeItemIndex === 6 ? s.highlighted : null}>
              <ListItemIcon>
                <BarChartIcon />
              </ListItemIcon>
              <ListItemText primary="User Plan Limits" />
            </ListItem>
          </Link>
        </div>
      )
    }

Answer 2

您可以改用react-router-dom的NavLink組件，它接受一些可以讓您實現主動路由行為的道具，就像您試圖實現的那樣。

然后您可以將s.highlighted傳遞給activeClassName並修改 css 以定位它的第一個子組件，該子組件將針對ListItem組件。

這是您更新的代碼：

const useStyles = makeStyles((theme) =>
  createStyles({
    link: {
      textDecoration: 'none',
      color: theme.palette.grey[900],
    },
    highlighted: {
      '& > div': {
        backgroundColor: lighten(green[500], 0.5)
      }
    },
  })
)

// eslint-disable-next-line
//@ts-nocheck
export const MenuItems: React.FC = () => {
  const s = useStyles()

  return (
    <div>
      <NavLink activeClassName={s.highlighted} to="/dashboard/proxies" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <CloudDone />
          </ListItemIcon>
          <ListItemText primary="Proxies" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/permissions" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <VerifiedUser />
          </ListItemIcon>
          <ListItemText primary="Permissions" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/test-helpers" className={classnames(s.link)}>
        <ListItem>
          <ListItemIcon>
            <Help />
          </ListItemIcon>
          <ListItemText primary="Test Helpers" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/plans" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <FormatListNumbered />
          </ListItemIcon>
          <ListItemText primary="Plans" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/user-management" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <Person />
          </ListItemIcon>
          <ListItemText primary="User Management" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/activate-subscription" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <PersonAdd />
          </ListItemIcon>
          <ListItemText primary="Activate Subscription" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/user-plan-limits" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <BarChartIcon />
          </ListItemIcon>
          <ListItemText primary="User Plan Limits" />
        </ListItem>
      </NavLink>
    </div>
  )
}