Question

我在反应项目中使用来自材料ui的卡片。我试图在我的卡片中使用两个函数，onMouseOver和onMouseOut。但是我的代码给了我一个错误，说“Uncaught TypeError：无法读取属性'onMouseOver'的未定义”。以下是我的代码中的摘要。

class ExpandableCard extends Component {
    constructor(props) {
        super(props);
        this.state = {shadow: 1}
    }

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

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

    render(){
        var Populate = this.props.mediaFiles.map(function (value) {
            return (
            <MuiThemeProvider>
                <Card key = {value.id}
                      onMouseOver={this.onMouseOver}
                      onMouseOut={this.onMouseOut}
                      zDepth={this.state.shadow}
                >

Answer 1

您似乎只是在render方法中的map函数中缺少上下文（this）的基本javascript问题。

我建议你将渲染中的map函数更改为箭头函数（这样它将保持外部上下文与内部函数一致），这应该足够了。：）

render() {
  var Populate = this.props.mediaFiles.map((value) => {
    return (
      <MuiThemeProvider>
        <Card key = {value.id}
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
        >
        ...

无法读取未定义卡片材料的属性ui

1 个答案: