切换选择答案

【问题标题】：toggle selected切换选择
【发布时间】：2021-03-19 10:55:39
【问题描述】：

在有状态组件中，我有以下代码：

const handleUserClick = (username, usermemo, userSelected) => {
    const isUsername = userName === username ? "Select a user" : username;
    const isUsermemo = userMemo === usermemo ? null : usermemo;
    setUserName(isUsername);
    setUserMemo(isUsermemo);
    setSelectedUser(userSelected);
  };

在无状态组件中，我有以下代码：

const selectUserClick = ({ target }) => {
    let selectedUserIndex = USERS_DATA[target.value];
    let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name} 
                  - ${selectedUserIndex.occupation}`;
    let usermemo = `"${selectedUserIndex.catch_phrase}"`;

    userSelected = target.classList.toggle("selected");

    getUser(username, usermemo, userSelected);`enter code here`
  };

【问题讨论】：

它是因为您正在切换当前单击的目标的选定状态，而不对先前选择的目标执行任何操作。
@MuhammadHaseeb，您好，感谢您的建议。那我该怎么做呢？

标签： javascript reactjs components stateless stateful

【解决方案1】：

尝试将 User.js 更改为以下

className 是根据选择的用户动态设置的

参考链接 - Code sandbox

import React from "react";
import { USERS_DATA } from "./data.js";

export default function User({ getUser, userSelected }) {
  const selectUserClick = ({ target }) => {
    let selectedUserIndex = USERS_DATA[target.value];
    let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name} 
                      - ${selectedUserIndex.occupation}`;
    let usermemo = `"${selectedUserIndex.catch_phrase}"`;

    // userSelected = target.classList.toggle("selected");

    getUser(username, usermemo, selectedUserIndex);
  };

  return (
    <div className="users-container">
      <ul>
        {USERS_DATA.map((user, index) => (
          <li
            key={index}
            value={user.id - 1}
            onClick={selectUserClick}
            className={`users ${
              userSelected && user.id === userSelected.id ? "selected" : ""
            }`}
          >
            {user.user_name}
          </li>
        ))}
      </ul>
    </div>
  );
}

【讨论】：

为了提高可读性，将更改 `className={${userSelected && user.id === userSelected.id ? "users selected" : "users"}} `（此处将反勾号覆盖为代码 :)）

【解决方案2】：

另一种方法是：

我已在代码中添加为 cmets 以作简要说明

export default function User({
  getUser,
  userSelected
}) {
  const selectUserClick = ({
    target
  }) => {
    let selectedUserIndex = USERS_DATA[target.value];
    let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name} 
                      - ${selectedUserIndex.occupation}`;
    let usermemo = `"${selectedUserIndex.catch_phrase}"`;

    // get all li elements of selected users
    let usersEl = document.getElementsByClassName("users selected");
    let usersList = [...usersEl];

    // assigns exisiting class to toggled class beforre selection
    usersList.forEach((element) => {
      element.className = "users";
    });

    // style only current selected el
    userSelected = target.classList.toggle("selected");

    getUser(username, usermemo, userSelected);
  };

【讨论】：

别担心，上面的答案可能有很多有效的方法:)

【解决方案3】：

在您的情况下，只要您一次不需要选择多个选项，这样的事情就可以工作。运行一个函数，获取所有附加了“已选择”类名称的用户，并在进行新选择之前将其关闭。

const selectUserClick = ({ target }) => {
  resetHighlights();

  let selectedUserIndex = USERS_DATA[target.value];
  let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name} - ${selectedUserIndex.occupation}`;
  let usermemo = `"${selectedUserIndex.catch_phrase}"`;

  userSelected = target.classList.toggle("selected");

  getUser(username, usermemo, userSelected);
};

function resetHighlights() {
  var arr = document.getElementsByClassName("users");

  for (var x = 0; x < arr.length; x++) {
    if (arr[x].classList.contains("selected")) {
      arr[x].classList.toggle("selected");
    }
  }
}

【讨论】：