Übergabe eines Werts als Parameter onClick-Funktion

Question

Ich habe mit dem Lernen von React JS begonnen und ich bin dabei, Parameter (wie eine Schaltflächen-ID oder Tab-Wert usw.) an das Tab onClick-Ereignis zu übergeben. Ich habe Ergebnisse erhalten, die von 'undefiniert' (bei Übergabe des Attributnamens als Parameter) stammen. Hinweis: Tag ist eine Komponente der Materialbibliothek.

Ich versuche, ein Tab-Menü zu erstellen, aber ich kann nicht erreichen, den Wert von Tab to handleChange-Funktion. Mein Ziel ist es, wenn der Benutzer auf die Registerkarte A klickt, sollte der Wert dieses Status auf "a" aktualisiert werden, in dem anderen Fall sollte der Wert "b" sein.

Wie kann ich das tun?

Danke.

Answer 1

Bei einer weiteren Untersuchung übergeben, fand ich das Problem - Sie wahrscheinlich nicht react-tab-event-plugin hat injizieren, weil es von material-ui erforderlich ist jeder machen onClick, onChange usw. Ereignis Feuer. Auch Ihre render scheint zu Material-ui Beispielen nicht korrekt zu sein. .

Also, F. E., in Ihrem App.js comp, sollten Sie spritzen es mögen:

import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); 

Diese Komponente perfekt funktioniert für mich:

state = { 
    activeTab: 'a' 
}; 

handleChange = (activeTab) => { 
    this.setState({ activeTab}); 
}; 

render =() => (
    <Tabs 
     value={this.state.activeTab} 
     onChange={this.handleChange} 
    > 
     <Tab label="Tab A" value="a"> 
      <div> 
       <h2>Controllable Tab A</h2> 
       <p> 
        Tabs are also controllable if you want to programmatically pass them their values. 
        This allows for more functionality in Tabs such as not 
        having any Tab selected or assigning them different values. 
       </p> 
      </div> 
     </Tab> 
     <Tab label="Tab B" value="b"> 
      <div> 
       <h2>Controllable Tab B</h2> 
       <p> 
        This is another example of a controllable tab. Remember, if you 
        use controllable Tabs, you need to give all of your tabs values or else 
        you wont be able to select them. 
       </p> 
      </div> 
     </Tab> 
    </Tabs> 
); 

Answer 2

Heyo, in diesem Fall, dass Sie refs verwenden können, oder Sie können den Wert mit this.handleChange.bind(this, "value")