React class 属性 onclick

Question

这是我的场景

<List>
    {mainTags.map((mainTagItem) => {
    return (
        <ListItem onClick={() => { setMainTag(mainTagItem.tag.tagId) }} button className={classes.mainTagItem}>
        <div className={classes.mainTagCircle}></div>
        <ListItemText
            primary={mainTagItem.tag.name}
        />
        </ListItem>
    )
    })}
</List>

当我点击我的 ListItem（即被选中）时，我希望元素 <div className={classes.mainTagCircle}> 有一个活动的 class

例如：

<div classes={{ root: !!listItemSelected ? classes.mainTagCircleActive : classes.mainTagCircle, }}></div>

我的 ListItem 中已经有一个方法 onClick，我该如何应用这个逻辑？

Answer 1

鉴于您有一个 mainTag 状态，您可以与您的元素 tagId 进行比较以定义 class 到 select。如果它与您的状态相同，则将返回 active class：

<div className={
  mainTag === mainTagItem.tag.tagId 
    ? classes.mainTagCircleActive
    : classes.mainTagCircle}>
</div>

Answer 2

带库的解决方案

你可以试试这个库 clsx。然后做这样的事情：


function Component() {
  const [mainTag, setMainTag] = useState(null);

  return (
   <List>
    {mainTags.map((mainTagItem) => {
      return (  
       <ListItem onClick={() => { setMainTag(mainTagItem.tag.tagId) }} className= 
         {clsx([classes.mainTagItem, mainTag === mainTagItem.tag.tagId ? : 
         'activeClass': 'defaultClass' ])}>
        <div className={classes.mainTagCircle}></div>
        <ListItemText
            primary={mainTagItem.tag.name}
        />
        </ListItem>
       )
    })}
   </List>
  )
}

没有库的解决方案



function Component() {
  const [mainTag, setMainTag] = useState(null);

  return (
   <List>
    {mainTags.map((mainTagItem) => {
      return (  
       <ListItem onClick={() => { setMainTag(mainTagItem.tag.tagId) }} className={
         mainTag === mainTagItem.tag.tagId 
         ? classes.mainTagCircleActive
         : classes.mainTagCircle}
        />
        </ListItem>
       )
    })}
   </List>
  )
}

React class 属性 onclick

React class prop onclick

javascript

reactjs

material-ui

listitem

带库的解决方案

没有库的解决方案