Esta puede ser una pregunta simple y solo me falta algo, pero aún no he encontrado una respuesta.

Me gustaría usar useState con un objeto que almacene eventos onChange y onClick .

Con onChange , los atributos de event.target.name y event.target.value se proporcionan desde el DOM virtual. Eso hace que sea fácil identificar a qué parámetro debe apuntar el evento.

Sin embargo, con onClick no hay atribución del elemento de ninguno de estos parámetros event.target .

¿Cómo se puede identificar qué etiqueta está generando un evento onClick para decirle al controlador qué parámetro debería afectar en un objeto de varios parámetros booleanos?

Aquí hay un ejemplo que creé en un esfuerzo por ser lo más simple y completo posible:

 import React from 'react'; const initialState = { switches: { menuOpen: false, modalOpen: false, }, fields: { username: '', password: '', }, }; export default function Header(props) { const [changeStateObj, setChangeStateObj] = useState(initialState.fields); const [toggleStateObj, setToggleStateObj] = useState(initialState.switches); useEffect(() => { console.log(changeStateObj, toggleStateObj); }, [changeStateObj, toggleStateObj]); const changeHandler = (event) => { let name = event.target.name; // these provide values let value = event.target.value; setChangeStateObj((values) => ({ ...values, [name]: value })); // and therefore, this works }; const clickHandler = (event) => { let name = event.target.name // nothing here setToggleStateObj((prevState) => ({ [name]: !prevState.name })); // no dice }; return ( <div> <label htmlFor="username"> User Name <input type="text" name="username" onChange={changeHandler} /> </label> <label htmlFor="password"> Password <input type="password" name="password" onChange={changeHandler} /> </label> <button name="modalOpen" onClick={clickHandler}> Open modal </button> <button name="menuOpen" onClick={clickHandler}> Open menu </button> </div> ); }