Ereignis-Listener in React auswählen und hinzufügen

Question

Was wäre der beste Weg, um diese JS in etwas React freundlich zu konvertieren? Ich erstelle mein erstes React-Projekt, und das hat mich ziemlich ratlos gemacht.

Dank

document.querySelector('.nav').addEventListener('click', e => { 
e.target.classList.toggle('visible'); 
}); 

Answer 1

Check out this example einer interaktiven Reagieren Komponente.

Sie würden eine Komponente erstellen, die den Status verfolgt (d. H., Ob es visible ist), und die Eingabe verarbeitet, um diesen Status zu aktualisieren.

class Square extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: null, 
    }; 
    } 

    render() { 
    return (
     <button className="square" onClick={() => this.setState({value: 'X'})}> 
     {this.state.value} 
     </button> 
    ); 
    } 
}