Запуск функции onClick при монтировании компонента

Question

Вот моя функция в компоненте

myFunc = () => {...}

Я написал что-то вроде этого

<MyComponent onClick={this.myFunc()}/>

Функция onClick сработает при монтировании компонента. Но если я напишу так

<MyComponent onClick={this.myFunc}/>

или это

<MyComponent onClick={() => this.myFunc()}/>

Работает нормально.

Может кто-нибудь объяснить мне, почему это произошло?

Answer 1

Потому что, когда вы делаете это:

<MyComponent onClick={this.myFunc()}/>

Вызывает функцию при монтировании и присваивает onClick возвращаемому значению из this.myFunc.Вам нужно передать ссылку на функцию - любую из этих:

<MyComponent onClick={this.myFunc}/>
<MyComponent onClick={() => this.myFunc()}/>

Первая передает ссылку на this.myFunc, а вторая передает новую функцию, которая вызывает myFunc.Вам нужно будет использовать второй, если вы хотите передать аргументы this.myFunc.