Tengo 6 menús desplegables en la barra lateral.
cuando hago clic en el título, se mostrará el submenú.
Puedo manejar eso con cada función onClick.
me gusta
const [state, setState] = useState({ one: false, two: false, three: false, four: false, five: false, six: false, }); const oneHandler = (e) => { e.preventDefault(); setState({ ...state, one: !state.one }); } const twoHandler = (e) => { e.preventDefault(); setState({ ...state, two: !state.two }); }
y a cambio
<div onClick={oneHandler}>First</div> {state.one ? ( <div>Something</div> ):( "" )} <div onClick={twoHandler}>Second</div> {state.two ? ( <div>Something</div> ):( "" )} ...repeat
funciona, pero creo que los códigos son malos.
Entonces, traté de hacer eso usando un evento onClick.
me gusta
const clickHandler = (value) => { setState({...state, value: !state.value}); }; ... <div onClick={()=> oneHandler(one)}>First</div>
pero en la consola, solo muestra falso.
Solo quiero dejarlo claro y en breve
¿Me pueden recomendar algún otro método?
const clickHandler = (value) => { setState({...state, [value]: !state[value]}); }; ... <div onClick={()=> clickHandler('one')}>First</div> <div onClick={()=> clickHandler('two')}>First</div> <div onClick={()=> clickHandler('three')}>First</div>
Supongo que esto resolverá tu problema.