Material-UI + Reagieren: Karte kann nicht mit Expander erweitert werden

Question

Ich habe eine einfache Card-Komponente, die ich von der Website von Material-ui kopiert habe.

Ich versuche, das in meinem Code zu implementieren. Wenn ich auf den CardHeader klicke, wird er nicht erweitert.

Dies ist meine Komponente:

import React, { Component } from 'react'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card'; 
import FlatButton from 'material-ui/FlatButton'; 

const CardExample =() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
     <Card expanded={true}> 
      <CardHeader 
       title="Without Avatar" 
       subtitle="Subtitle" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardText expandable={true}> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
       Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
       Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
      </CardText> 
      <CardActions expandable={true}> 
       <FlatButton label="Action1" /> 
       <FlatButton label="Action2" /> 
      </CardActions> 
     </Card> 
    </MuiThemeProvider> 
) 

export default CardExample; 

Und ich habe es meinen Container hier importiert:

import React, { Component } from 'react'; 

import LogoBig from '../components/logobig'; 
import CardExample from '../components/cardexample'; 

export default class Completed extends Component { 
    render() { 
     return (
      <div className="popup completed main-container"> 
       <div className="logobar"> 
        <div className="logo"> 
         <LogoBig /> 
        </div> 
       </div> 
       <div className="mainpanel"> 
        <CardExample /> 
       </div> 
      </div> 
     ); 
    } 
} 

Ich habe es umgesetzt wie die Dokumentation in Material-ui-Standort, aber der Expander macht nichts.

Bitte helfen Sie mir dabei. Ist etwas falsch mit der Art, wie ich die Komponente importiere? Oder etwas anderes?

Danke

Answer 1

Ab heute benötigt material-ui react-tap-event-plugin für einige Komponenten, die Klickaktionen handhaben (wie erweiterbare Karten oder IconMenu). Diese Abhängigkeit wird versprochen, in Zukunft entfernt werden, aber jetzt müssen Sie:

1. die-Tap-Ereignis-Plugin reagiert über npm mit der --save Flagge
2. Import & rufen Sie das Plugin irgendwo installieren in der App-Initialisierung Code wie folgt:

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

 
injectTapEventPlugin();

Answer 2

Ich denke, Ihr Problem dies auch sein mag:

<Card expanded={true}> 

Sie haben Ihren erweiterten Wert permanent auf einen konstanten ‚true‘, anstatt sie auf eine Komponente Zustand begrenzenden gebunden:

<Card expanded={this.state.cardExpanded}> 

Sie müssen wahrscheinlich eine Zwei-Wege-Datenbindung machen. Nimm Blick auf „Controlled-Komponenten“ hier:

https://facebook.github.io/react/docs/forms.html#controlled-components

Das ist alles, was ich von der Spitze von meinem Kopf sagen kann. Ich weiß, dass es keine voll funktionsfähige Antwort ist, aber ich habe nicht die Umgebung, um es für Sie zu testen, und ich habe diese spezielle m-ui-Komponente nie wirklich benutzt. Trotzdem hoffe ich, dass es hilft.