Tengo dos mesas una al lado de la otra. La tabla de la izquierda contiene un botón Agregar que pasa el contenido de la tabla de la izquierda a la tabla de la derecha.
Una vez que se realiza este proceso, el botón debe desactivarse y debe heredar un estilo diferente de una clase diferente.
const [recordsRight, setRecordsRight] = useState([]); <TableBody className = "leftTable"> { recordsLeft === null ? [] : recordsLeft.map((item, index) => ( //<TableCell></TableCell> //Table Contents <button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, item)}> <CircleCheckIcon /> Add </button> )) } </TableBody> <TableBody className = "rightTable"> { recordsRight === null ? [] : recordsRight.map((item, index) => ( //<TableCell></TableCell> //Same Table Contents )) } </TableBody> function handleAddSwitch(e, item) { e.target.disabled = true; e.target.className = "addToggle2"; let newRecordsRight = [...recordsRight]; newRecordsRight.push(item); setRecordsRight(newRecordsRight); } .addToggle{ background: green; } .addToggle2{ background: grey; }cuando elimino la línea setRecordsRight de la función handleAddSwitch, el color del botón cambia y se desactiva.
Pero una vez que lo agrego nuevamente, el proceso deja de funcionar y podría agregar el mismo elemento de izquierda a derecha una y otra vez. ¿Qué tengo que hacer?
Debería almacenar el indicador para deshabilitado/habilitado en el estado de su componente (como un indicador en el item , o como un mapa separado de indicadores marcados por algún identificador único para item ), sin modificar directamente el DOM. (Esto no solo se aplica al indicador disabled en los botones, se aplica generalmente a cualquier cosa en el DOM renderizado). La razón es que si modifica directamente el DOM, entonces su componente se vuelve a renderizar por cualquier motivo, React lo sobrescribirá sus modificaciones DOM.
He aquí un ejemplo simplificado:
const {useState} = React; let nextItemId = 1; const initialItems = [ {id: nextItemId++, enabled: true}, {id: nextItemId++, enabled: true}, {id: nextItemId++, enabled: true}, {id: nextItemId++, enabled: true}, ]; const Example = () => { const [items, setItems] = useState(initialItems); const addItem = () => { setItems(items => [...items, { id: nextItemId++, enabled: true, }]); }; const toggleItem = itemToToggle => { setItems(items => items.map(item => { if (item.id === itemToToggle.id) { item = {...item, enabled: !item.enabled}; } return item; })); }; return <div> {items.map(item => ( <div className="item" key={item.id} onClick={() => toggleItem(item)}> Item {item.id}: {item.enabled ? "Enabled - click to disable" : "Disabled - click to enable"} </div> ))} <input type="button" onClick={addItem} value="Add item" /> </div>; }; ReactDOM.render(<Example />, document.getElementById("root")); .item { user-select: none; } <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>