Question

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

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

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

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

现在我想更改卡片课程，例如，当expanded为newExpandedState时，请将课程设为true。

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

Answer 1

你可以这样做：

1。在array变量中维护一个state，该变量将包含中所有卡片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

这样做的一种方法是使用您自己的自定义卡片包装材料-ui的卡片并为其添加状态： import＆＃39;的反应＆＃39 ;; 从＆＃39; material-ui＆＃39;;

导入{Card}

<Grid>
    <Viewbox Stretch="UniformToFill">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <!-- Titlebar -->
            <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="#2d2d30">
                <StackPanel Name="spTitlebar1" FlowDirection="LeftToRight" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
                    <Label Name="lblTitle" HorizontalAlignment="Left" BorderThickness="0" Foreground="White">IHS Towers SCADA</Label>
                </StackPanel>

                <StackPanel Name="spTitleBar2" FlowDirection="RightToLeft" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
                    <Button Name="btnClose" Content="X" Click="btnClose_Click" Style="{StaticResource TitleButton}" />
                    <Button Name="btnMinimize" Content="_" Click="btnMinimize_Click" Style="{StaticResource TitleButton}" />

                    <Border BorderThickness="1,0,0,0" BorderBrush="#686868">
                        <Button Name="btnSettings" Click="btnSettings_Click" Style="{StaticResource TitleButton}" ToolTip="Settings">
                            <Image Source="Images/settings-icon.png" Height="20" Width="20"/>
                        </Button>
                    </Border>

                    <Button Name="btnReports" Click="btnReports_Click" Style="{StaticResource TitleButton}" ToolTip="View reports">
                        <Image Source="Images/reports-icon.png" Height="20" Width="20"/>
                    </Button>                    
                </StackPanel>
            </StackPanel>

                <!-- Towers Bar across the top Height="50" -->
            <StackPanel Grid.Row="1" Grid.Column="0" Name="spTowers" Background="#2d2d30" VerticalAlignment="Top" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
                <Border BorderThickness="5,0,0,0" BorderBrush="#686868" VerticalAlignment="Top"></Border>             
            </StackPanel>

            <!-- Alert Window in the center -->
            <Frame Name="frmBody" Grid.Row="2" Grid.Column="0" Margin="0" Background="#1e1e1e" NavigationUIVisibility="Hidden" />

            <!-- Actions Bar across the bottom Height="60" -->
            <StackPanel Grid.Row="3" Grid.Column="0" Name="spActions" Height="60" Background="#2d2d30" VerticalAlignment="Top" FlowDirection="RightToLeft" Orientation="Horizontal">
                <Button Name="btnSMS" Click="btnSMS_Click" Height="30" Width="66" Margin="10,10,10,10" Style="{StaticResource RoundedButtonGreen}">Send SMS</Button>
            </StackPanel>

        </Grid>
    </Viewbox>
</Grid>

然后你可以像这样使用它：

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

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;

工作小提琴就在这里：https://codesandbox.io/s/76O8pnW9Q

React MaterialUI卡：如何在扩展时更改Card的课程？ - ＆GT;自定义React组件

3 个答案: