REACT: toggle class onClick, und rufen Sie andere Funktion

Question

Ich bin neu zu reagieren, also bitte gedulden Sie sich - ich bin mir sicher, dass dies ein einfaches Problem ist, aber ich habe eine Menge Probleme bei der Suche nach einer Lösung.

Ich habe eine Reihe von Schaltflächen, wenn sie angeklickt werden, füge ich einen 'aktiven' Klassennamen zu dieser Schaltfläche hinzu und entferne sie von anderen Schaltflächen, die möglicherweise aktiv sind.

Ich muss auch ein Panel mit Inhalt basierend auf welche Schaltfläche geklickt wird öffnen.

Bisher habe ich es geschafft, den Klassennamen der klickten Taste umschalten, kann aber nicht herausfinden, wie es nur auf die Schaltfläche anzuwenden, die (siehe Code unten) geklickt wird

<a onClick={this.buttonClick(1)} className={this.state.isButtonActive ? 'active' : null}>button text</a> 
<a onClick={this.buttonClick(2)} className={this.state.isButtonActive ? 'active' : null}>button text</a> 

und die Funktion den aktiven Zustand und offen entsprechende Panel auf die Schaltfläche basierend wechseln geklickt:

buttonClick(buttonNumber) { 

    this.setState(prevState => ({ 
     isButtonActive: !prevState.isButtonActive 
    })); 

    openPanel(buttonNumber) 
} 

ich habe mit dem Erstellen einer untergeordneten Komponente für die Schaltfläche und umschalten der Klassenname innerhalb der Komponente experimentiert, aber dann kann ich nicht auslösen die openPanel() funktioniert wie im übergeordneten com Teil.

Ich hoffe, das macht Sinn - vielen Dank im Voraus :)

Answer 1

das Problem ist, dass Sie die gleiche state für beide Tasten gemeinsam nutzen, so dass, wenn Sie es für eine ändern, ändert es für den anderen. Sie sollten Ihre Schaltflächen in verschiedenen Komponenten verpacken, damit sie einen unterschiedlichen Status haben.

Wenn Sie einen Rückruf in der übergeordneten Komponente benötigen, die aufgerufen werden soll, übergeben Sie sie an die Schaltflächenkomponenten, damit sie auch diese auslösen können.

Der Knopf könnte wie folgt aussehen:

class Button extends React.Component { 
    constructor() { 
    super() 
    this.state = { isButtonActive: false } 
    this.onClick = this.onClick.bind(this)  
    } 

    onClick() { 
    this.setState({ 
     isButtonActive: !this.state.isButtonActive 
    }) 

    this.props.openPanel(this.props.buttonNumber) 
    } 

    render() { 

    return (
     <button onClick={this.onClick()} className={this.state.isButtonActive ? 'active' : null}>button text</a> 
    ) 
    } 
} 

, wie die übergeordnete Komponente aussehen könnte:

class Parent extends React.Component { 
    onButtonClicked (number) { 
    console.log(`Button ${number} was clicked`) 
    } 

    render() { 
    return (
     <div> 
     <Button buttonNumber={1} openPanel={this.onButtonClicked} /> 
     <Button buttonNumber={2} openPanel={this.onButtonClicked} /> 
     </div> 
    ) 
    } 

Answer 2

Dies geschieht, weil der gemeinsamen Zustand sowohl für die Schaltfläche.

Statt einen Booleschen Wert für die aktive der Speicherung, können Sie die Zahl speichern wie

<a onClick={this.buttonClick(1)} className={this.state.isButtonActive === 1 ? 'active' : null}>button text</a> 
<a onClick={this.buttonClick(2)} className={this.state.isButtonActive === 2 ? 'active' : null}>button text</a> 

und klicken Aktion

buttonClick(buttonNumber) { 

    this.setState({ 
     isButtonActive: buttonNumber 
    }); 

    openPanel(buttonNumber) 
}