主页 / 问题 / 1361078
Accepted
Cobra777
Asked:2022-05-15 01:58:51 +0000 UTC2022-05-15 01:58:51 +0000 UTC

如何将类添加到活动（选定）列表项？（反应）

  • 772

伙计们，告诉我有一个 func.component，它是 3 个元素的列表。如何将“活动”元素的功能附加到下面的代码中（即，当您单击列表元素时，将“选定”类添加到其中）？通常，要在列表的 3 个元素之间进行“切换”，其中必须的一个（也是唯一一个）处于活动状态。在下载开始时，列表的第一个元素始终处于活动状态。

function ListItems() {
    const changeSelectedSort1 = () => {
        setSelected(!selected)
        alert('1я функция')
    }
    
    const changeSelectedSort2 = () => {
        setSelected(!selected)
        alert('2я функция')
    }
    
    const changeSelectedSort3 = () => {
        setSelected(!selected)
        alert('3я функция')
    }
    
    const arrListIcons = [
        {id: 1, classes: 'fas fa-random', selected: true, handler: changeSelectedSort1},
        {id: 2, classes: 'fas fa-sort-alpha-up', selected: false, handler: changeSelectedSort2},
        {id: 3, classes: 'fas fa-sort-alpha-up-alt', selected: false, handler: changeSelectedSort3},
    ]
    
    const [selected, setSelected] = useState('......')
    
    return (
        <ul style={styles.ul}>
            {arrListIcons.map(item => (
                <ListItem key={item.id}
                                  classes={selected ? `${item.classes} selected` : `${item.classes}`}
                                  onClick={item.handler}/>
            ))}
        </ul>
    );
}

export default ListItems;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我开始稍微解决这个问题，但我觉得我会搞砸很长时间。

稍后发现，这里有这样的解决方案 - React / How to assign classes on click？

但在我的版本中，立即有一个活动项目。一般来说，我会很高兴得到任何帮助。

reactjs

1 个回答

  1. Best Answer

    import React from "react";
import classNames from "classnames";

function Application() {
  const [selectedUser, setSelectedUser] = React.useState('9433967183154892');
  const [users, setUsers] = React.useState([
    {id: '9433967183154892'},
    {id: '3296199699013249'},
    {id: '5803790563847613'}
  ]);

  return (
    <React.Fragment>
      {users.map((user) => (
        <div
          key={user.id}
          className={classNames('user', {
            'user--state-selected': selectedUser === user.id
          })}
          onClick={() => setSelectedUser(user.id)}
        >
          {user.id}
        </div>
      ))}
    </React.Fragment>
  );
}
    .user {
  color: green;
  cursor: pointer;
}
.user--state-selected {
  color: red;
}

    • 1

相关问题