Реагировать на клики по загрузке компонентов

Question

Я перечисляю сообщения на карте функции. Я создал элемент кнопки и добавил onclick, но при загрузке компонента запускает функцию onclick.

Postlist.js:

        const createPostElement = (data, index) => (
        <article className={'neokudum-postItem d-flex flex-row'} key={index}>
            <div className={'postItem-UserInfoBox d-flex flex-column'}>
                <div className={'postItem-Content'}>
                    <p>{data.postContent}</p>
                    {data.uploadedContent === 'null' ? '' : <LazyLoadImage className={'timeline-Image'} src={API_BASE + data.uploadedContent} effect={'blur'} /> }
                </div>
                <div className={'postItem-Actions'}>
                    <div className="d-flex flex-wrap mt-3">
                        <div className="p-2 postItem-Flex-Action">
                            <button className={'clearBtn'} onClick={this.props.likePost(5)}>
                                <Icon.Heart stroke={'#525f7f'} />
                                <span>0</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    );

    const postList = (
        <div className={'neokudum-PostList'}>
            {
                this.props.posts.postList.map((post, index) =>
                    {createPostElement(post, index)}
                )
            }
        </div>
    );

вывод: image1

Я не нажал кнопку, но likePost загрузка функции при рендеринге компонента

Answer 1

Вы присваиваете результат вызова likePost свойству onClick.

onClick={this.props.likePost(5)}

должно быть

onClick={() => this.props.likePost(5)}

, чтобы вывместо этого назначьте реальную функцию.

Answer 2

Преобразовать в подобное:

<button className={'clearBtn'} onClick={() => this.props.likePost(5)}> // at here
     <Icon.Heart stroke={'#525f7f'} />
     <span>0</span>
</button>