首頁猿問切換選擇。

切換選擇。

JavaScript

料青山看我應如是 2023-10-20 16:52:53

在有狀態組件中，我有以下代碼：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` };

查看完整描述

3 回答

斯蒂芬大帝

TA貢獻1827條經驗獲得超8個贊

嘗試將 User.js 更改為以下內容

className 根據選擇的用戶動態設置

Referlink -代碼沙箱

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 (

<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>

);

}

反對回復 2023-10-20

Qyouu

TA貢獻1786條經驗獲得超11個贊

在您的情況下，只要您不需要一次選擇多個選項，這樣的事情就可以工作。運行一個函數，獲取所有附加有“selected”類名的用戶，并在進行新選擇之前將其關閉。

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

}

反對回復 2023-10-20

陪伴而非守候

TA貢獻1757條經驗獲得超8個贊

另一種方法是：

我在代碼中添加了簡短的注釋

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

};

反對回復 2023-10-20

3 回答
0 關注
188 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

切換選擇。

切換選擇。

3 回答

添加回答

切換選擇。