• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

356
Views
e.target.disabled = true no funciona si un useState Hook está presente en la misma función

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error