自动调用在onClick JSX事件中对此this.function（）进行响应而不会出现错误

Question

I have a function that I want to run which plays a particular audio file when the screen loads and when the onClick is clicked by the user.

playSound = () => {
    let audioSound = new Audio(this.state.activity[this.state.index].audio0);
    return audioSound.play();
}

I want it to run onload, so I included the parentheses in front of the onClick function call.

onClick={this.playSound()}

The only problem with this is that I get this error in the console when it loads or I click on the onClick again.

Warning: Expected `onClick` listener to be a function, instead got a value of `object` type

I'd like to know why this specific error is popping up.

I'm able to get the audio working by calling the this.playSound() inside of my render(), but I feel like there's a cleaner way that I don't know about.

Answer 1

您可以将onClick替换为以下内容

onClick={this.playSound}

Answer 2

If you want to run the playSound function any time the element is clicked, you have to change it to onClick={this.playSound} as other people have suggested.

It sounds like you also want playSound to run when the component loads for the first time? If so, add this.playSound() inside the lifecycle method componentDidMount . This would mean your component has to be a class-based stateful component, not a functional stateless component. You mentioned a render method in your question, which makes me believe your component is already class-based. Here is how this lifecycle method would look like for you:

componentDidMount() {
    this.playSound();
}

If you want playSound to run every time any state or props change in your component (which seems unlikely), you could put this.playSound() at the beginning of your render method.

Hope this helps!