He estado intentando durante un tiempo hacer que esto funcione y cualquier método que he encontrado no parece funcionar. Probé W3 Schools y esta pregunta de desbordamiento de pila y otras parecen seguir el mismo formato. Parece que no puedo ver qué está mal con mi código. Si alguien puede encontrar el problema que realmente ayudaría:
import React from 'react'; export class Hamburger extends React.Component { constructor (props) { super(props); this.state = { click: false }; } handleClick = () => { if (this.state.click) { this.setState({click: false}); } else { this.setState({click: true}); }; } render() { let className = 'hamburger'; if (this.state.click) { className += ' cross'; } return ( <div className={className} onclick={this.handleClick} > <svg viewbox='0 0 100 100' preserveAspectRatio='xMidYMid meet' > <line x1='10' x2='90' y1='20' y2='20' id='top'/> <line x1='10' x2='90' y1='50' y2='50' id='mid'/> <line x1='10' x2='90' y1='80' y2='80' id='btm'/> </svg> </div> ); } }Gracias por adelantado
su onclick debe ser onClick
Los controladores de eventos deben estar en camellos. Puedo ver que ha definido como onclick en lugar de onClick.
Cambie a <div className={className} onClick={this.handleClick} >
Cambie sus controladores de eventos onclick a onClick siempre en camelCase