Estoy tratando de crear un cuadro de texto simple en una ventana emergente en mi aplicación. Para que el usuario ingrese texto, creé una variable useState y durante el evento onChange actualicé el estado al valor de la entrada. Sin embargo, no mantiene su estado. Código a continuación:
const App() { [units, setUnits] = useState(''); [popUpHtml, setPopUpHtml] = useState(''); ... function handleChange(event){ setUnits(event.target.value); } const betslip = (team, line) => ( <div className='betslip'> <h1 className="betslip-header">Betslip</h1> <div > <table className="betslip-table"> <tr> <th>Team</th> <th>Line</th> <th>Unit(s)</th> </tr> <tr > <td className='betslip-td'>{team}</td> <td className='betslip-td'>{linePlusMinus(line)}</td> <td className='betslip-td'> <div className='unit-div'> <input type='text' required className='unit-input' value={units} onChange={(event) => handleChange(event)}/> </div> </td> </tr> </table> <table className="betslip-table"> <tr> <th>Risk</th> <td className='betslip-td'>{units}</td> </tr> <tr> <th>Reward</th> <td className='betslip-td'>{reward(units, line)}</td> </tr> </table> </div> </div> ); function showPopUp(team, line) { setPopUpHtml(betslip(team, line)); setPopUpStyle('pop-up-container-show'); } function PopUp() { return ( <div id="popUp" className={popUpStyle}> <div className="pop-up-bg"> </div> <div className="pop-up"> <img className='close-button' src={closeButton} onClick={hidePopUp.bind(null)} /> {popUpHtml} </div> </div> ) } ... return ( <div className="container"> <PopUp html={<h1>Hello World </h1>} /> )Estoy tratando de reasignar el estado en la etiqueta.
setPopUpHtml(betslip(team, line));Almacenar elementos JSX en estado es una manera realmente fácil de causar errores con datos obsoletos, como ha descubierto. Los valores en los elementos se bloquearán en el momento en que establezca el estado y nunca se actualizarán nuevamente (a menos que establezca el estado nuevamente con nuevos elementos).
En cambio, su estado debe ser solo la mínima parte de los datos a partir de los cuales puede saber qué debería estar en la página. Y luego, esos datos se usan durante el renderizado para elegir qué elementos mostrar. En su caso, los datos parecen ser units (que ya son una variable de estado), team y line . Así que agregue dos variables de estado para el equipo y la línea:
const [units, setUnits] = useState(''); const [team, setTeam] = useState(null); const [line, setLine] = useState(null);Luego configúrelos en un valor no nulo en la función showPopup:
function showPopup(team, line) { setTeam(team); setLine(line); }Y verifique su presencia cuando renderice:
return ( <div id="popUp" className={team && line ? 'pop-up-container-show' : undefined}> <div className="pop-up-bg"> </div> <div className="pop-up"> <img className='close-button' src={closeButton} onClick={hidePopUp.bind(null)} /> {team && line && betSlip(team, line)} </div> </div> );