Material-UI + React：卡不能擴展擴展器

我有一個簡單的卡組件，我從material-ui的網站上覆制而來。Material-UI + React：卡不能擴展擴展器

我試圖在我的代碼中實現。當我點擊CardHeader時，它不會擴展。

這是我的組件：

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;

而且我它導入到我這裏容器：

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> 
     ); 
    } 
}

我實現它就像在材料界面的網站上的文檔，但膨脹機什麼都不做。

請幫我這個。導入組件的方式有什麼問題嗎？或者是其他東西？

謝謝

來源

2016-05-18 godheaper

看起來不怪我。您是否在控制檯中收到任何警告或錯誤？ – Clarkie

控制檯上沒有錯誤。我從各種谷歌搜索中讀到，我需要實現'react-tap-event-plugin'。這是material-ui的依賴嗎？ – godheaper

從今天開始，material-ui需要react-tap-event-plugin來處理點擊操作的某些組件（如可擴展卡或IconMenu）。這種依賴關係承諾在將來會被刪除，但現在你需要：

通過NPM與--save標誌安裝反應抽頭事件 - 插件
導入&調用插件的地方在應用程序初始化代碼如下：

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

 
injectTapEventPlugin();

來源

2016-05-20 14:30:14

是的，它在我的index.js中包含injectTapEventPlugin時起作用。謝謝 – godheaper

我認爲你的問題可能是這樣的：

<Card expanded={true}>

你永久綁定您的擴展值恆定的「真」，而不是它的邊界到組件的狀態：

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

您可能需要進行雙向數據綁定。採取看看「自控元件」在這裏：

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

這是所有我可以從我的頭頂說。我知道這不是一個全功能的答案，但我沒有環境來爲你測試它，而且我從來沒有真正使用這個特定的m-ui組件。不過，我希望它有幫助。

來源

2016-05-18 07:38:44

是的，我編輯了用於擴展= {true}的代碼進行測試，以便強制擴展卡片 – godheaper

Material-UI + React：卡不能擴展擴展器

回答

相關問題