Estoy tratando de averiguar cómo alternar una clase activa al hacer onClick para cambiar las propiedades de CSS.
Tomé muchos enfoques y leí muchas respuestas SO. Usar jquery sería relativamente simple, sin embargo, no puedo descifrar cómo hacer esto con reaccionar. Mi código está abajo. ¿Alguien puede aconsejarme cómo debo hacer esto?
Sin crear un nuevo componente para cada artículo, ¿es posible hacer esto?
class Test extends Component(){ constructor(props) { super(props); this.addActiveClass= this.addActiveClass.bind(this); } addActiveClass() { //not sure what to do here } render() { <div> <div onClick={this.addActiveClass}> <p>1</p> </div> <div onClick={this.addActiveClass}> <p>2</p> </div> <div onClick={this.addActiveClass}> <p>3</p> </div> </div> } }Usar estado. Los documentos de React están aquí .
class MyComponent extends Component { constructor(props) { super(props); this.addActiveClass= this.addActiveClass.bind(this); this.state = { active: false, }; } toggleClass() { const currentState = this.state.active; this.setState({ active: !currentState }); }; render() { return ( <div className={this.state.active ? 'your_className': null} onClick={this.toggleClass} > <p>{this.props.text}</p> </div> ) } } class Test extends Component { render() { return ( <div> <MyComponent text={'1'} /> <MyComponent text={'2'} /> </div> ); } }También puedes hacer esto con ganchos .
function MyComponent (props) { const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); }; return ( <div className={isActive ? 'your_className': null} onClick={toggleClass} > <p>{props.text}</p> </div> ); }Preferiría usar el operador "&&" en la declaración if en línea. En mi opinión, proporciona una base de código más limpia de esta manera.
En general, podrías estar haciendo algo como esto.
render(){ return( <div> <button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button> </div> ) }Solo tenga en cuenta que la función de flecha es una característica de ES6 y recuerde establecer el valor 'this.state.active' en el constructor de clase(){}
this.state = { active: false }o si desea inyectar css en JSX, puede hacerlo de esta manera
<button style={this.state.active && style.button} >button</button>y puedes declarar la variable json de estilo
const style = { button: { background:'red' } }recuerda usar camelCase en hojas de estilo JSX.