Question

在我的孩子竞争对手中，我正在尝试向我的html添加onclick事件，当我转发时，我收到错误：

“bundle.min.js：35884 Uncaught（in promise）TypeError：无法读取未定义的属性'bind'。

我尝试在父组件中定义被调用的函数，但这也不起作用。这是onClick={playMusic}位给我的麻烦。

import {Component} from 'react'
import {Link} from 'react-router';

class Thumbs extends Component {
    constructor(props){
        super(props)
        this.playMusic = this.Playmusic.bind(this);
    }

    playMusic() {
        var audio = new Audio(media_item.href);
        audio.play();
    }

render() {
        const {href, nasa_id} = this.props
        if (nasa_id !== '000') {
            return <Link to={`/asset/${nasa_id}`}><img src={href} width="100" height="100"/></Link>
        } else {
            return <img
                    src="https://www.collinsdictionary.com/images/thumb/gramophone_108546017_250.jpg?version=3.1.118"
                    width="100" height="100"
                    onClick={playMusic}
                    />
        }
    }
}

export default Thumbs

Answer 1

您可以使用胖箭头函数并删除构造函数中的函数绑定。更改 playMusic（）方法，如下所示

playMusic = () => {
    var audio = new Audio(media_item.href);
    audio.play();
}

之后从构造函数中移除this.playMusic = this.Playmusic.bind(this);，并在render方法中使用onClick={this.playMusic}。

在React中，onclick in child组件不是bindin

1 个答案: