Material-UI + React：卡片无法用扩展器扩展答案

【问题标题】：Material-UI + React : Card cannot expand with expanderMaterial-UI + React：卡片无法用扩展器扩展
【发布时间】：2016-09-14 08:51:52
【问题描述】：

我有一个从 material-ui 网站复制的简单卡片组件。

我正在尝试在我的代码中实现它。当我点击 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>
        );
    }
}

我已经将它实现为 material-ui 网站中的文档，但扩展器什么也没做。

请帮我解决这个问题。我导入组件的方式有什么问题吗？还是别的什么？

谢谢

【问题讨论】：

对我来说并不奇怪。您是否在控制台中收到任何警告或错误？
控制台上没有错误。我从各种谷歌搜索中读到，我需要实现“react-tap-event-plugin”。这是对 material-ui 的依赖吗？

标签： javascript reactjs webpack redux material-ui

【解决方案1】：

截至今天，material-ui 需要 react-tap-event-plugin 来处理一些处理点击操作的组件（例如可展开的 Card 或 IconMenu）。承诺将来会删除此依赖项，但现在您需要：

通过带有 --save 标志的 npm 安装 react-tap-event-plugin
在应用初始化代码中的某处导入和调用插件，如下所示：

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

injectTapEventPlugin();

【讨论】：

是的，当我在 index.js 中包含 injectTapEventPlugin 时，它就起作用了。谢谢

【解决方案2】：

我认为你的问题可能是这样的：

<Card expanded={true}>

您已将扩展值永久绑定到常量“true”，而不是将其绑定到组件状态：

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

您可能需要进行双向数据绑定。在此处查看“受控组件”：

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

这就是我从头顶上所能知道的。我知道这不是一个功能齐全的答案，但我没有为您测试它的环境，而且我从未真正使用过这个特定的 m-ui 组件。不过，我希望它有所帮助。

【讨论】：

是的，我用expanded={true}编辑了代码进行测试，所以它会强制卡片展开