Javascript 材质界面：如何在悬停元素上设置卡zDepth动画（反应）

我想动画的zDepth整个卡时，鼠标是在它。 我尝试过这个（所以我是React的新手），但我不知道如何实现它：

<Card 
     linkButton={true}
     href="/servicios/"
     onClick={Link.handleClick} zDepth={3}
     onMouseEnter={this.setState({zDepth={1}})}>
</Card>

提前感谢。

构造函数（道具）{
constructor(props) {
  super(props);
  this.state = { shadow: 1 }
}

onMouseOver = () => this.setState({ shadow: 3 });
onMouseOut = () => this.setState({ shadow: 1 });

<Card 
   onMouseOver={this.onMouseOver}
   onMouseOut={this.onMouseOut}
   zDepth={this.state.shadow}
>

超级（道具）；
this.state={shadow:1}
}
onMouseOver=（）=>this.setState（{shadow:3}）；
onMouseOut=（）=>this.setState（{shadow:1}）；

更新#1

完整示例

// StyledCard.js

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

class StyledCard extends Component {
  state: {
    shadow: 1
  }

  onMouseOver = () => this.setState({ shadow: 3 });

  onMouseOut = () => this.setState({ shadow: 1 });

  render() {
    return (
      <Card 
        onMouseOver={this.onMouseOver}
        onMouseOut={this.onMouseOut}
        zDepth={this.state.shadow}
      >
        {this.props.children}
      </Card>
    );
  }

export default StyledCard;

//StyledCard.js
从“React”导入React，{Component}；
从“物料界面/卡片”导入{Card}；
类StyledCard扩展了组件{
声明：{
影子：1
}
onMouseOver=（）=>this.setState（{shadow:3}）；
onMouseOut=（）=>this.setState（{shadow:1}）；
render（）{
返回(
{this.props.children}
);
}
导出默认样式卡；

//Container.js
从“React”导入React；
从“/StyledCard”导入StyledCard；
常量容器=（）=>[
卡1，
卡2，
卡3，
];
导出默认容器；

更新#2

特别

// withShadow.js

import React from 'react';

const withShadow = (Component, { init = 1, hovered = 3 }) => {
  return class extends React.Component {
    state: {
      shadow: init
    };

    onMouseOver = () => this.setState({ shadow: hovered });

    onMouseOut = () => this.setState({ shadow: init });

    render() {
      return (
        <Component
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
          {...this.props}
        />
      );
    }
  };
};

export default withShadow;

//withShadow.js
从“React”导入React；
const withShadow=（组件，{init=1，悬停=3}）=>{
返回类扩展了React.Component{
声明：{
阴影：init
};
onMouseOver=（）=>this.setState（{shadow:hovered}）；
onMouseOut=（）=>this.setState（{shadow:init}）；
render（）{
返回(
);
}
};
};
用阴影导出默认值；

//Container.js
从“React”导入React；
从“物料界面/卡片”导入{Card}；
从“/withShadow”导入withShadow；
const CardWithShadow=withShadow（卡片，{init:2，悬停：4}）；
常量容器=（）=>[
卡1，
卡2，
卡3，
];
导出默认容器；

@Alex Sandiiarov answer对我不起作用。文档显示要使用

提升的

属性。

类组件扩展React.Component{
状态={
提出：错
}
toggleRaised=（）=>this.setState（{raised:！this.state.raised}）；
render（）{
返回
...
}
}

你只能使用材质界面提供的道具，卡片上没有zdepth，但你可以将所有的注意放在一个纸制组件中，然后添加到纸制组件中。MUI没有提供启用悬停或其他功能真是不可思议。保持悬停状态以触发提升会增加复杂性。这是可行的。但是，如果我有多个多张卡，然后在一张卡上悬停，会改变状态，从而改变所有卡的深度。当您有多张卡时，如何做到这一点？仅供参考，您的代码无法编译。您的ToggleRised函数缺少一个

}

。@haaduken很好spot@MadisonCourto我有点困惑。。。只需根据文档执行

，您还可以使用纸质API向组件添加更多道具，因此您可以使用“提升”

// withShadow.js

import React from 'react';

const withShadow = (Component, { init = 1, hovered = 3 }) => {
  return class extends React.Component {
    state: {
      shadow: init
    };

    onMouseOver = () => this.setState({ shadow: hovered });

    onMouseOut = () => this.setState({ shadow: init });

    render() {
      return (
        <Component
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
          {...this.props}
        />
      );
    }
  };
};

export default withShadow;

// Container.js

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

const CardWithShadow = withShadow(Card, { init: 2, hovered: 4 });

const Container = () => [
  <CardWithShadow>Card 1</CardWithShadow>,
  <CardWithShadow>Card 2</CardWithShadow>,
  <CardWithShadow>Card 3</CardWithShadow>,
];

export default Container;

class Component extends React.Component{

  state = {
    raised:false
  }

  toggleRaised = () => this.setState({raised:!this.state.raised});

  render(){
    return <Card onMouseOver={this.toggleRaised} 
      onMouseOut={this.toggleRaised} 
      raised={this.state.raised}>

      ...

      </Card>

  }
}