En react-js, haga clic en un div que div resaltará y haga clic nuevamente, lo normal, seleccionamos múltiples div y anulamos la selección, seleccionamos un máximo de cuatro div solo estas son las condiciones. Soy principiante en react-js mi div son,
<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>aquí se usa select class para resaltar el div, cómo resolver este problema tengo conocimientos básicos en react-js por favor ayúdenme
Me acercaría a esto almacenando una matriz de objetos de tareas pendientes en estado con useState() , y mantendría una propiedad selected para cada tarea pendiente. A medida que se hace clic en todos, la propiedad seleccionada cambia.
Para limitar las selecciones a 4, simplemente agregue una marca con un conteo como el que se muestra a continuación.
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"));He agregado una TASK_LIST para representar dinámicamente el div. Aquí la función toggleTask seleccionará y deseleccionará el div. Y como dijiste, se seleccionará un máximo de cuatro 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> ); }En Reactjs, usamos el estado para realizar un seguimiento y representar la vista del componente. En su caso, podemos crear un estado llamado seleccionado que mantiene la lista de tareas seleccionadas.
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;Inicialmente, está vacío. Cuando el usuario hace clic en una tarea, se agrega a la lista de tareas seleccionadas . En updateSelected , implementamos la lógica requerida como se muestra arriba. Observe en el className para cada tarea que usamos cadenas de plantilla de JavaScript. Esto nos ayuda a agregar condicionalmente la clase 'seleccionada' a className si el usuario la selecciona.