切换选择

Question

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

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`
  };

Answer 1

在您的情况下，只要您不需要一次 select 多个选项，这样的方法就可以工作。运行一个函数，可以让所有用户的 class 名称 'selected' 附加到他们身上，并在创建新的 selection 之前将其关闭。

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");
    }
  }
}

Answer 2

另一种方法是：

我已在代码中添加了注释以供简要说明

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);
  };

Answer 3

尝试将 User.js 更改为以下

根据选择的用户动态设置类名

参考链接 - 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>
  );
}

切换选择

toggle selected

javascript

components

stateful

stateless

reactjs