React Material UI Card：如何在展开时更改 Card 的 class？ -> 自定义 React 组件

Question

页面上有 20 张卡片。
MaterialUI Card 有 onExpandChange 属性，我可以在其中定义这样的操作：

<Card expandable={true} onExpandChange={this.clickHandle}>

在这个动作中我可以很容易地知道点击的卡片是否展开，因为回调函数在 MaterialUI 中是这样定义的：function(newExpandedState: boolean) => void

clickHandle = (newExpandedState: boolean) => {
    //do something
}

现在我想改卡的class，比如当newExpandedState是true的时候给classexpanded。

问题是我不知道如何告诉这个函数扩展了哪张卡。 onExpandChange={this.clickHandle(newState, 'card1')} 之类的东西不起作用。我在页面上有 20 张卡片，但我不知道应该得到哪一张 expanded class。任何想法如何做到这一点？

Answer 1

你可以这样做：

1. 在 state 变量中维护一个 array ，该变量将记录卡的所有 ID（任何唯一属性卡）处于扩展状态。

constructor(){
   super();
   this.state = {
      cardStatus: []
   }
}

2. 将唯一值传递给每个 onExpandChange 方法：

onExpandChange={() => this.clickHandle(card.name)}

3. 现在如果 newExpandedState 是 true 将那个值推入 state array 否则删除它：

clickHandle(name, newExpandedState){
    let cardStatus = this.state.cardStatus.slice();
    if(newExpandedState)
        cardStatus.push(name);
    else{
        let index = this.state.cardStatus.indexOf(name);
        cardStatus.splice(index,1);
    }
    this.setState({cardStatus});        
}

4. 现在生成卡片时检查 cardStatus array 是否具有唯一的属性卡片，然后应用不同的 classNames.

<Card className={this.state.cardStatus.indexOf(card.name) >= 0 ? 'expanded': 'not'}>

Answer 2

一种方法是用您自己的自定义卡片包裹 material-ui 的卡片并为其添加状态：从 'react' 导入 React；从 'material-ui';

导入 { Card}

class MyCustomCard extends React.Component {
  state = {
    expanded: null
  }

  toggleExpanded = () => {
    this.setState((state) => ({
      expanded: !state.expanded
    }))
  }

  render() {
    return <Card expandable expanded={this.state.expanded} onExpandChange={this.toggleExpanded}>
  }
}

那么你可以这样使用它：

import React from 'react';
import Card from '../MyCustomCard';

class App extends React.Component {
  ...

  render() {
    return (
      <div>
        <Card />
        <Card />
        <Card />
        <Card />
        <Card />
        ...
      </div>
    )
  }
}

Answer 3

只是为了分享结果：

终于在@glenn-reyers 的帮助下让它工作并获得了 CustomCard 组件的代码：

import React from 'react';
import {Card} from 'material-ui/Card';


class CustomCard extends React.Component<any, any> {
  state = {
    expanded: false
  }

  handleExpandChange = (expanded) => {
    this.setState({expanded: expanded});
  };

  render() {
    return 
        <Card 
            className={this.state.expanded ? 'controller-card expanded' : 'controller-card'} 
            expandable={true} 
            expanded={this.state.expanded} 
            onExpandChange={this.handleExpandChange}>
                {this.props.children}
        </Card>
  }
}

export default CustomCard;

工作 fiddle 在这里：https://codesandbox.io/s/76O8pnW9Q

React Material UI Card：如何在展开时更改 Card 的 class？ -> 自定义 React 组件

React MaterialUI Card: how to change Card's class on expand? -> Custom React component

javascript

reactjs

material-ui