在 react-js 中點擊一個 div 會高亮，再次點擊就正常了，我們選擇多個 div 并取消選擇，最多選擇四個 div 只有這些是條件。我是 react-js 的初學者，我的 div 是，
<div className='todoDiv select'>Task1</div>
<div className='todoDiv'>Task2</div>
<div className='todoDiv'>Task3</div>
<div className='todoDiv'>Task4</div>
<div className='todoDiv'>Task5</div>
這里select class是用來高亮div的，怎么解決這個問題我有react-js的基礎知識請幫幫我
uj5u.com熱心網友回復：
您可以像這樣將樣式放在變數中
const [style, setStyle] = useState({ "--my-css-var": 10 })
然后像這樣把它放在你的div中
<div style={style}>...</div>
然后，在更改“樣式”變數的 div 上創建一個函式 onClick。更改樣式變數的狀態
<div style={style} onClick={() => setStyle({"--my-css-var": 12})}>...</div>
你明白了
uj5u.com熱心網友回復：
我添加了一個TASK_LIST動態渲染 div。這里toggleTask函式將選擇和取消選擇 div。正如您所說，最多將選擇四個 div 。
import { Fragment, useState } from "react";
const TASK_LIST = [1, 2, 3, 4, 5];
export default function MultiSelect() {
const [selectedTask, selectTask] = useState([]);
const isSelected = (taskId) => {
return selectedTask.filter((task) => task === taskId).length;
};
const toggleTask = (taskId) => {
if (isSelected(taskId)) {
// deselect div
selectTask((tasks) => tasks.filter((ts) => ts !== taskId));
} else if (selectedTask.length < 4) {
// select div, max four div will be selected
selectTask((tasks) => [...tasks, taskId]);
}
};
return (
<Fragment>
{TASK_LIST.map((task) => (
<div
className={`todoDiv${isSelected(task) ? " select" : ""}`}
key={task}
onClick={() => toggleTask(task)}
>
Task{task}
</div>
))}
</Fragment>
);
}
uj5u.com熱心網友回復：
在 Reactjs 中，我們使用狀態來跟蹤和渲染組件的視圖。在您的情況下，我們可以創建一個名為 selected 的狀態來維護所選任務的串列。
import React, {useState, useEffect} from 'react';
import './App.css';
function App() {
const [selected, setSelected] = useState([])
const updateSelected = (task) => {
if(!selected.includes(task) && selected.length < 4) {
let newSelected = [...selected, task];
setSelected(newSelected)
} else {
let newSelected = selected.filter(t => t !== task)
setSelected(newSelected)
}
}
let tasks = ["Task1", "Task2", "Task3", "Task4", "Task5"]
return (
<main>
{
tasks.map(task => (
<div onClick={() => updateSelected(task)} className={`todoDiv ${selected.includes(task) ? 'select' : ''}`}>{task}</div>
))
}
{`selected = ${selected.join(", ")}`}
</main>
);
}
export default App;
最初，它是空的。當用戶單擊一個任務時，它會被添加到選定任務串列中。在updateSelected中，我們實作了如上所示的所需邏輯。請注意，在每個任務的 className 中，我們使用了 JaveScript 模板字串。如果用戶選擇了 className，這有助于我們有條件地將“selected”類添加到 className。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/488895.html
標籤：javascript css 反应 ecmascript-6 使用效果
上一篇：Pandas：使用read_csv從StringIO讀取時為空資料框
下一篇：如何在CSS中設計通知容器？