Javascript 反应物料卡片：如何更换卡片'；什么课-&燃气轮机；自定义反应组件

页面上有20张卡片。
MaterialUI卡具有

OneExpandChange

属性，我可以在其中定义如下操作：

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

现在我想更改卡的类，例如，当

newExpandedState

为

true

时，给它类

expanded

问题是我不知道如何告诉此函数已扩展了哪个卡。像

onExpandChange={this.clickHandle（newState，'card1'）}

这样的东西不起作用。我在页面上有20张卡片，我不知道哪一张应该得到

扩展

类。有什么办法吗？

您可以这样做：

1。在

状态下维护一个
数组
，该变量将记录处于扩展状态的卡的所有id（卡的任何唯一属性）

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

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

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

3.如果
newExpandedState
为
true
则将该值推送到
状态数组中
否则将其删除：

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数组是否具有卡的唯一属性，然后应用不同的
类名

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

=0？“扩展“：”非“}>
您可以执行以下操作：

1。在
状态下维护一个
数组
，该变量将记录处于扩展状态的卡的所有id（卡的任何唯一属性）

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

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

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

3.如果
newExpandedState
为
true
则将该值推送到
状态数组中
否则将其删除：

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数组是否具有卡的唯一属性，然后应用不同的
类名

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

=0？“扩展“：”非“}>
一种方法是使用您自己的自定义卡包装材质ui的卡，并向其添加状态：
从“React”导入React；
从“物料界面”导入{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}>
  }
}

类MyCustomCard扩展了React.Component{
状态={
扩展：空
}
toggleExpanded=（）=>{
this.setState（（状态）=>({
已展开：！state.expanded
}))
}
render（）{
返回
}
}

然后你可以这样使用它：

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

class App extends React.Component {
  ...

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

从“React”导入React；
从“../MyCustomCard”导入卡；
类应用程序扩展了React.Component{
...
render（）{
返回(
...
)
}
}
一种方法是使用您自己的自定义卡包装材质ui的卡，并向其添加状态：
从“React”导入React；
从“物料界面”导入{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}>
  }
}

类MyCustomCard扩展了React.Component{
状态={
扩展：空
}
toggleExpanded=（）=>{
this.setState（（状态）=>({
已展开：！state.expanded
}))
}
render（）{
返回
}
}

然后你可以这样使用它：

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

class App extends React.Component {
  ...

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

从“React”导入React；
从“../MyCustomCard”导入卡；
类应用程序扩展了React.Component{
...
render（）{
返回(
...
)
}
}
只是为了分享结果：

最后，在@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;

从“React”导入React；
从“物料界面/卡片”导入{Card}；
类CustomCard扩展React.Component
以共享结果：

最后，在@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;

从“React”导入React；
从“物料界面/卡片”导入{Card}；
类CustomCard扩展React.Component
好主意。我做了类似的事情，但你的解决方案更干净。我刚刚在这里添加了state参数，以获取卡的状态：
onExpandChange={（state）=>this.clickHandle3（'card1'，state）}
。不过我还是很想知道是否有可能在函数中直接发送“card's object”。card's object？从何处生成卡的数据？我的意思是，如果我在
clickHandle
函数中设置一个断点，那么在“Local”中，我可以看到
newExpandedState
变量，以及
这个
，它引用卡本身及其类名和所有其他内容。但是如果我制作
console.log（this）
，我当然会检索组件本身，而不是卡。有可能到达扩展卡的“this”吗？它在某个地方，但在哪里？这样写：
onExpandChange={（newExpandedState，e）=>这个。单击handle（card.name，newExpandedState，e）}
现在这个
e对象
应该有卡的详细信息，试试
e.target
。Mayank，我完全按照你说的做了，但是如果我做了
console.log（e），我会得到
未定义的
在clickHandle功能中。你试过了吗？很好的主意。我做了类似的事情，但你的解决方案更干净。我刚刚在这里添加了state参数，以获取卡的状态：
onExpandChange={（state）=>this.clickHandle3（'card1'，state）}
。不过我还是很想知道是否有可能在函数中直接发送“card's object”。card's object？从何处生成卡的数据？我的意思是，如果我在
clickHandle
函数中设置一个断点，那么在“Local”中，我可以看到
newExpandedState
变量，以及
这个
，它引用卡本身及其类名和所有其他内容。但是如果我制作
console.log（this）
，我当然会检索组件本身，而不是卡。有可能到达扩展卡的“this”吗？它在某处，但是