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

Question

我有一个从 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 站点中的文档实现了它，但是扩展器什么都不做。

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

谢谢

Answer 1

我想你的问题可能是这样的：

<Card expanded={true}>

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

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

您可能需要进行双向数据绑定。在此处查看 "Controlled Components"：

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

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

Answer 2

截至今天，material-ui requires react-tap-event-plugin 用于处理点击操作的某些组件（如可扩展的 Card 或 IconMenu）。这个依赖承诺在未来被移除，但现在你需要：

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

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

injectTapEventPlugin();

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

Material-UI + React : Card cannot expand with expander

javascript

reactjs

webpack

redux

material-ui