切换选择。

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

尝试将 User.js 更改为以下内容className 根据选择的用户动态设置Referlink -代码沙箱import React from "react";import { USERS_DATA } from "./data.js";export default function User({ getUser, userSelected }) {&nbsp; const selectUserClick = ({ target }) => {&nbsp; &nbsp; let selectedUserIndex = USERS_DATA[target.value];&nbsp; &nbsp; let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - ${selectedUserIndex.occupation}`;&nbsp; &nbsp; let usermemo = `"${selectedUserIndex.catch_phrase}"`;&nbsp; &nbsp; // userSelected = target.classList.toggle("selected");&nbsp; &nbsp; getUser(username, usermemo, selectedUserIndex);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="users-container">&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; {USERS_DATA.map((user, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={user.id - 1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={selectUserClick}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={`users ${&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userSelected && user.id === userSelected.id ? "selected" : ""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {user.user_name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

在您的情况下，只要您不需要一次选择多个选项，这样的事情就可以工作。运行一个函数，获取所有附加有“selected”类名的用户，并在进行新选择之前将其关闭。const selectUserClick = ({ target }) => {&nbsp; resetHighlights();&nbsp; let selectedUserIndex = USERS_DATA[target.value];&nbsp; let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name} - ${selectedUserIndex.occupation}`;&nbsp; let usermemo = `"${selectedUserIndex.catch_phrase}"`;&nbsp; userSelected = target.classList.toggle("selected");&nbsp; getUser(username, usermemo, userSelected);};function resetHighlights() {&nbsp; var arr = document.getElementsByClassName("users");&nbsp; for (var x = 0; x < arr.length; x++) {&nbsp; &nbsp; if (arr[x].classList.contains("selected")) {&nbsp; &nbsp; &nbsp; arr[x].classList.toggle("selected");&nbsp; &nbsp; }&nbsp; }}

Answer 3

另一种方法是：我在代码中添加了简短的注释export default function User({&nbsp; getUser,&nbsp; userSelected}) {&nbsp; const selectUserClick = ({&nbsp; &nbsp; target&nbsp; }) => {&nbsp; &nbsp; let selectedUserIndex = USERS_DATA[target.value];&nbsp; &nbsp; let username = `${selectedUserIndex.first_name} ${selectedUserIndex.last_name}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - ${selectedUserIndex.occupation}`;&nbsp; &nbsp; let usermemo = `"${selectedUserIndex.catch_phrase}"`;&nbsp; &nbsp; // get all li elements of selected users&nbsp; &nbsp; let usersEl = document.getElementsByClassName("users selected");&nbsp; &nbsp; let usersList = [...usersEl];&nbsp; &nbsp; // assigns exisiting class to toggled class beforre selection&nbsp; &nbsp; usersList.forEach((element) => {&nbsp; &nbsp; &nbsp; element.className = "users";&nbsp; &nbsp; });&nbsp; &nbsp; // style only current selected el&nbsp; &nbsp; userSelected = target.classList.toggle("selected");&nbsp; &nbsp; getUser(username, usermemo, userSelected);&nbsp; };