Meteor and React: Korrekte Art, Elemente beim Klick zu manipulieren?

Question

Ich lerne Anwendungsentwicklung mit Meteor und React und bin in eine Hürde gerannt. Ich möchte, dass Benutzer auf ein Element klicken können und dadurch die Klasse eines anderen Elements ändern. Wenn ich eine Website ohne Meteor erstellen oder reagieren würde ich eine jQuery-Funktion wie folgt verwenden:

$("#button").click(function(){ 
    $("#target").removeClass("hidden"); 
}); 

Ich kann nicht herausfinden, wie scheinen zu verwenden jQuery in meine Reaktion Anwendung (aber das Kopieren Sie den Code in Chrom Web Konsole funktioniert), also begann ich zu googeln und fand heraus, dass es nicht empfehlenswert ist, jQuery zu verwenden oder das DOM bei der Verwendung von React direkt zu manipulieren. Ich verstehe nicht viel davon, wie das virtuelle DOM von React in diesem Stadium funktioniert.

Meine Frage ist also: Was ist der richtige Weg zu replizieren, was dieser jQuery-Code in einer React-Anwendung tut?

Answer 1

Ich empfehle Ihnen Klassennamen zu kombinieren (link) und Staat, so können Sie es wie folgt tun:

class Example extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     clicked: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    this.setState({ clicked: true }); 
    } 
    render() { 
    return (
     <div className={classNames('foo', { hidden : this.state.clicked })}> 
     <button onClick={this.handleClick} >BUTTON</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Example />, 
    document.getElementById('example') 
); 

Wenn staatliche clickedfalse ist, Klasse hidden auf ein bestimmtes Element nicht aktiv ist.