首頁猿問切換選擇。

切換選擇。

JavaScript

料青山看我應(yīng)如是 2023-10-20 16:52:53

在有狀態(tài)組件中，我有以下代碼：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); };在無狀態(tài)組件中，我有以下代碼：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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

嘗試將 User.js 更改為以下內(nèi)容

className 根據(jù)選擇的用戶動(dòng)態(tài)設(shè)置

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>

);

}

反對(duì) 回復(fù) 2023-10-20

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

在您的情況下，只要您不需要一次選擇多個(gè)選項(xiàng)，這樣的事情就可以工作。運(yùn)行一個(gè)函數(shù)，獲取所有附加有“selected”類名的用戶，并在進(jìn)行新選擇之前將其關(guān)閉。

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

}

反對(duì) 回復(fù) 2023-10-20

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

另一種方法是：

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

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

};

反對(duì) 回復(fù) 2023-10-20

3 回答
0 關(guān)注
183 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

切換選擇。

切換選擇。

3 回答

添加回答

切換選擇。