¿Cómo accedo al evento y al valor pasado a la función a la vez? Esto es lo que he intentado.
<ul className="list" data-testid="lists"> {options.map((option, i) => ( <li role="button" tabIndex="0" onClick={() => { setSelected(option); setOpen(false); }} className={state.cursor === i ? "activeList" : "list-item"} onKeyDown={ handleEnter(option) } > {option} </li> ))} </ul> const handleEnter = (option, e) => { if (e.keyCode === 13) { setSelected(option) } };lo que quiero hacer es cuando presiono enter quiero actualizar el estado con el valor de la opción pero no puedo hacerlo, ¿qué debo hacer?
El objeto de evento se pasa a la función onXXX .
Si desea pasarlo de la función onKeyDown a la función handleEnter , debe hacerlo explícitamente.
También debe pasar una función a onKeyDown en primer lugar, sin undefined cuál es el valor de retorno de la función que está llamando.
Use useCallback para detener la recreación de la función en cada renderizado.
const onKeyDown = useCallback( (event) => handleEnter(option, event), [option, handleEnter] );y
onKeyDown={ onKeyDown } Tenga en cuenta, sin embargo, que keyCode está obsoleto y ahora tenemos mejores alternativas para él.
Puede actualizar la propiedad como
onKeyDown={(e)=> handleEnter(option, e)}vinculará sus eventos en su función handleEnter. Espero que funcione para ti. Gracias.