在我的孩子竞争对手中,我正在尝试向我的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
答案 0 :(得分:0)
您可以使用胖箭头函数并删除构造函数中的函数绑定。更改 playMusic()方法,如下所示
playMusic = () => {
var audio = new Audio(media_item.href);
audio.play();
}
之后从构造函数中移除this.playMusic = this.Playmusic.bind(this);
,并在render方法中使用onClick={this.playMusic}
。