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

问题

There are 20 cards on the page.
MaterialUI Card has onExpandChange property where I can define an action like this:

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

In this action I can easily know if the clicked card is expanded or not, because the callback function is defined like this in the MaterialUI: function(newExpandedState: boolean) => void

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

Now I would like to change card's class, for example, give it class expanded when newExpandedState is true.

The problem is that I don't know how to tell this function which card has been expanded. Things like onExpandChange={this.clickHandle(newState, 'card1')} don't work. I have 20 cards on the page and I don't know which one should get expanded class. Any ideas how to do this?

回答1:

One way to do it is to wrap the material-ui's card with your own custom card and add a state to it: import React from 'react'; import { Card } from 'material-ui';

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

Then you can use it like this:

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

class App extends React.Component {
  ...

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

回答2:

You can do this:

1. Maintain an array in state variable that will have the record of all the id's of card (any unique property of card) which are in expanded state.

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

2. Pass the unique value to each onExpandChange method:

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

3. Now if newExpandedState is true the push that value inside state array otherwise remove it:

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. Now when generating the card check if that cardStatus array has that unique property of card or not and then apply different classNames.

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

回答3:

Just to share the result:

Finally got it working with the help of @glenn-reyers and got this code for the CustomCard component:

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;

Working fiddle is here: https://codesandbox.io/s/76O8pnW9Q

来源：https://stackoverflow.com/questions/44409731/react-materialui-card-how-to-change-cards-class-on-expand-custom-react-com

标签

javascript

reactjs

material-ui