действие выполняется до наступления события

Question

У меня есть кнопка, которая при нажатии должна вызвать функцию реагировать. Но функция запускается всякий раз, когда я перезагружаю страницу, прежде чем нажать кнопку. И это не работает, когда я нажимаю кнопку. Вот мой код здесь:

show(){
  console.log('button Clicked');
}
render(){
  return(
    <button onClick={this.show()}>Show</button>
  )
}

Функция show запускается каждый раз, когда я перезагружаю страницу, но не при нажатии кнопки. Не запускается ли функция после нажатия кнопки? Можете ли вы сказать мне, что я делаю неправильно.

Answer 1

В данный момент вы выполняете функцию немедленно. Чтобы он вызывался только при нажатии, используйте жирную стрелку в событии onClick:

render(){
  return(
    <button onClick={() => this.show()}>Show</button>
  )
}

Answer 2

Вы передали ему вызов функции, которая будет оценена (выполнена). Вам нужно предоставить ему функцию вместо:

<button onClick={() => this.show()}>Show</button>

Вы также можете использовать this.show (без скобок), но, возможно, потребуется связать его или объявить show как свойство класса stage-3, если вы обращаетесь к this в show.