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

转换为这样：

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

Answer 2

您要将调用 likePost的结果分配给onClick属性。

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

应该是

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

以便您分配实际功能。

反应onclick触发加载组件

2 个答案: