在React-Js中选择和取消选择多个DIV

Question

在react-js单击一个Div中，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>

这里选择 class用于突出显示DIV，如何解决这个问题，我在React-js中拥有基本知识，请帮助我

Answer 1

我将通过 usestate（usestate（usestate（） ，并维护每个待办事项属性的属性。当单击戒酒时，所选属性会更改。

要将选择限制为4，只需添加一个与以下类似计数的支票。

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [todos, setTodos] = useState([
    { id: "1", name: "Task 1", selected: true },
    { id: "2", name: "Task 2", selected: false },
    { id: "3", name: "Task 3", selected: false },
    { id: "4", name: "Task 4", selected: false },
    { id: "5", name: "Task 5", selected: false }
  ]);

  const todoClicked = (e) => {
    // max 4 selected
    if (!e.target.classList.contains("selected")) {
      const selectedCount = todos.filter((todo) => todo.selected).length;
      if (selectedCount === 4) {
        return;
      }
    }

    setTodos(
      todos.map((todo) =>
        todo.id === e.target.getAttribute("data-id")
          ? { ...todo, selected: !todo.selected }
          : todo
      )
    );
  };

  return (
    <div>
      {todos.map((todo) => (
        <div
          onClick={todoClicked}
          data-id={todo.id}
          key={todo.id}
          className={`todoDiv${todo.selected ? " selected" : ""}`}
        >
          {todo.name}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 2

在ReactJ中，我们使用状态跟踪和呈现组件的视图。在您的情况下，我们可以创建一个称为“选择的状态”，该状态可维护所选任务的列表。

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;

最初，它是空的。当用户单击任务时，将其添加到选定任务的列表中。在更新中，我们实现了所需的逻辑，如上所示。在每个任务的className中注意我们使用Javescript模板字符串。如果用户选择了类名，这有助于我们将“选定”类“选择”添加到类名称。

Answer 3

我添加了 task_list 以动态渲染Div。这里 toggletask 函数将选择＆amp;去选择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>
  );
}

Answer 4

/* Start by defiinig a variable 'divState' to save the state of
   your divs and a function 'setDivState' sto modify that state.
   
   The state variable 'divState' eventually will look like this:
   
   {
      div1: false,
      div2: true,
      div3: false,
      ...
   }
*/
const [divState, setDivState] = useState({})

// we will use this function to update a div state:
const updateState = (id) => {
    setDivState(prevState =>
        ({
            ...prevState, // keep the other divs as they are rught now
            [`div${item}`]: !prevState[`div${item}`] // update the current
            // div's
            // state
        }))
}

// Now we will render the divs, as many as you want
// I will use a the map function to iterate over an array of 4 divs
{
    [1, 2, 3, 4].map(item => (
        <div
            className={`todoDiv ${divState[`div${item}`] ? 'select' : ''}`} // assign
            // class dynamically depending on the current div's state
            onClick={() => updateState(item)}>
            {/* render something inside the divs */}
        </div>
    ))
}

一个完整的组件示例：

import React, {useState} from 'react';

const YourComponent = () => {
    /* Start by defiinig a variable 'divState' to save the state of
       your divs and a function 'setDivState' sto modify that state.
       
       The state variable 'divState' eventually will look like this:
       
       {
          div1: false,
          div2: true,
          div3: false,
          ...
       }
    */
    const [divState, setDivState] = useState({})

// we will use this function to update a div state:
    const updateState = (id) => {
        setDivState(prevState =>
            ({
                ...prevState, // keep the other divs as they are rught now
                [`div${item}`]: !prevState[`div${item}`] // update the current
                // div's
                // state
            }))
    }

// Now we will render the divs, as many as you want
// I will use a the map function to iterate over an array of 4 divs
    return (
        <>  {
            [1, 2, 3, 4].map(item => (
                <div
                    {/* assign class dynamically depending on the current
                     div's state */}
                    className={`todoDiv ${divState[`div${item}`] ? 'select' : ''}`}
                    onClick={() => updateState(item)}>
                    {/* render something inside the divs */}
                </div>
            ))
        }
        </>
    )
}

Answer 5

您可以将样式放入类似的变量中，

const [style, setStyle] = useState({ "--my-css-var": 10 })

然后将其放在Div中，

<div style={style}>...</div>

然后将其放在Div上，在DIV上创建一个更改“样式”变量的函数。 样式变量的状态

<div style={style} onClick={() => setStyle({"--my-css-var": 12})}>...</div>

更改您获得JIST的