Estoy tratando de construir una función de selección para mi objeto. El problema es que cuando hago clic en otro elemento, los otros elementos permanecen seleccionados.
¿Cómo puedo establecer todos los demás elementos en isSelected: false, después de seleccionar el elemento que quiero?
Necesito una manera de que cuando establezca el estado del elemento que quiero en verdadero, establecerá todos los demás estados del elemento en falso.
import "./styles.css"; import { useEffect, useState } from "react"; // The parent component const App = () => { const [textBoxDivs, setTextBoxDivs] = useState({}); const addNewTextBox = () => { const numOfTextBoxDivs = Object.keys(textBoxDivs).length; console.log(numOfTextBoxDivs, "num"); setTextBoxDivs({ ...textBoxDivs, [`div${numOfTextBoxDivs + 1}`]: { isSelected: false, innerText: "text" } }); }; const selectItem = (e) => { if (e) { const selectedItemKey = e.target.id; setTextBoxDivs({ ...textBoxDivs, [selectedItemKey]: { ...textBoxDivs[selectedItemKey], isSelected: true } }); } }; return ( <div> <button onClick={() => addNewTextBox()}> Click me to create a selectable div </button> {Object.keys(textBoxDivs).length > 0 && Object.keys(textBoxDivs).map((key, index) => { return ( <div style={{ border: textBoxDivs[key].isSelected ? "2px solid green" : "unset" }} onClick={(e) => selectItem(e)} key={index} id={key} > {textBoxDivs[key].innerText} </div> ); })} </div> ); }; export default App;códigos y caja: https://codesandbox.io/s/friendly-water-wf4f5?file=/src/App.js:0-1385
Para comenzar, se definirá e , por lo que no es necesario verificarlo.
Yo haría algo como esto:
const selectItem = (e) => { const selectedItemKey = e.target.id; const nextState = {...textBoxDivs} Object.keys(nextState).forEach(k => { nextState[k].isSelected = false }) nextState[selectedItemKey].isSelected = true setTextBoxDivs(nextState); };No he probado esto.
Lo implementaría con un objeto de estado selected , por lo que cada div solo necesita verificar si es o no el seleccionado.
Agregue un objeto de estado para realizar un seguimiento de selected
const [selected, setSelected] = useState(); ¿Cambiar el operador ternario a la selected == key ? "2px solid green" : "unset" . Además, cambie su onClick a () => setSelected(key)
<div style={{ border: selected == key ? "2px solid green" : "unset" }} onClick={() => setSelected(key)} key={index} id={key} > Luego elimine su función selectItem() .
Aquí está el código completo:
const App = () => { const [textBoxDivs, setTextBoxDivs] = useState({}); const [selected, setSelected] = useState(); const addNewTextBox = () => { const numOfTextBoxDivs = Object.keys(textBoxDivs).length; console.log(numOfTextBoxDivs, "num"); setTextBoxDivs({ ...textBoxDivs, [`div${numOfTextBoxDivs + 1}`]: { isSelected: false, innerText: "text" } }); }; return ( <div> <button onClick={() => addNewTextBox()}> Click me to create a selectable div </button> {Object.keys(textBoxDivs).length > 0 && Object.keys(textBoxDivs).map((key, index) => { return ( <div style={{ border: selected === key ? "2px solid green" : "unset" }} onClick={() => setSelected(key)} key={index} id={key} > {textBoxDivs[key].innerText} </div> ); })} </div> ); }; export default App; Creo que esto hará que su código sea más legible y reduce la cantidad de líneas que necesitará para lograr el efecto deseado al eliminar por completo la necesidad de su función selectItem .