Supongamos que tengo una función como esta en React
function Stars({handleStarClick, starClicked}) { if (starClicked === 3) { document.getElementById('star3').checked = true } return ( <div className="rate"> <input onClick={() => handleStarClick(5)} type="radio" id="star5" name="rate" value="5"/> <label htmlFor="star5" title="text">5 stars</label> <input onClick={() => handleStarClick(4)} type="radio" id="star4" name="rate" value="4" /> <label htmlFor="star4" title="text">4 stars</label> <input onClick={() => handleStarClick(3)} type="radio" id="star3" name="rate" value="3" /> <label htmlFor="star3" title="text">3 stars</label> <input onClick={() => handleStarClick(2)} type="radio" id="star2" name="rate" value="2" /> <label htmlFor="star2" title="text">2 stars</label> <input onClick={() => handleStarClick(1)} type="radio" id="star1" name="rate" value="1" /> <label htmlFor="star1" title="text">1 star</label> </div> ) }Quiero que el comportamiento predeterminado tenga todos los botones de opción sin marcar. Sin embargo, digamos que en un formulario un usuario selecciona el botón de opción de 3 estrellas, me gustaría poder pasar un accesorio que me permita renderizar este componente con el botón de opción de 3 estrellas marcado. ¿Cuál es la mejor manera de hacer esto?
En React, no debe usar document.getElementById() para acceder a los elementos DOM. Debe hacerse usando React Refs . En este caso, puedes evitarlo.
Puede usar lo siguiente como apoyo para que funcione:
checked={index === starClicked}Su código se puede simplificar de la siguiente manera:
function Stars({ handleStarClick, starClicked }) { return ( <div className="rate"> {Array.from({ length: 5 }, (_, i) => { const index = 5 - i; return ( <React.Fragment key={index}> <input onChange={() => handleStarClick(index)} checked={index === starClicked} type="radio" id={`star${index}`} name="rate" value={index} /> <label htmlFor={`star${index}`} title="text"> {index} stars </label> </React.Fragment> ); })} </div> ); } function App() { const [starClicked, handleStarClick] = React.useState(-1); return <Stars handleStarClick={handleStarClick} starClicked={starClicked} />; } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>