0
256
Views¿Cómo cambiar el color de fondo de th al hacer clic en reaccionar js?
Quiero cambiar el color de fondo de th cuando hago clic en tr . Este es mi código mínimo:
props.params.map((item, i) => { return ( <> <tr key={i} onClick={() => attributeClicked(i) } > <th className={'a'+i}> <span>{ item.label }</span> </th> </tr> </> ) }) function attributeClicked (i: number) { document.getElementsByClassName(`a${i}`)[0].style.backgroundColor = "red!important"; } Sin embargo, este código no funciona. Además, cuando paso el mouse sobre el style , aparece el error Property 'style' does not exist on type 'Element'.ts(2339)
·
Juan Pablo Isaza
1 answers
Answer question0
Hola, mira este ejemplo usando ref para acceder al elemento y cambiar el color de la fuente o lo que quieras.
import { createRef } from "react"; export default function App() { const renderTh = (data, index, ref) => { return ( <th ref={ref} key={index} onClick={() => redColor(ref)}> {data} </th> ); }; const redColor = (ref) => { if (!ref.current) return; ref.current.style.color = "red"; }; const dataSet = ["one", "two", "three"]; const refArray = []; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <table> <thead> {dataSet.map((data, index) => { const ref = createRef(); refArray[index] = ref; return renderTh(data, index, ref); })} </thead> </table> </div> ); } 
·
Juan Pablo Isaza
Report
Answer question