Javascript 渲染功能在React中自动触发onClick道具功能问题？

在父组件中，有一个子组件。在子组件中，我有一个具有单击功能的道具。在该单击函数中，在渲染组件时在单击之前触发。我需要限制渲染中的单击功能。检查下面我的代码

我有一个父组件是应用程序

    import React, { Component } from "react";
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";

import { Pagination } from './../Common/index';

class App extends Component {

  handlePageination = (current) => {
    console.log('trigger')
  }

  render() {
    return (
          <main className="main-block">
            <Pagination total={userList.length>0 ? totalCount : 0} range={10} initial={0} rowClick={this.handlePageination} count={currentPageNumber} />
          </main>

    )
  }
}

export default App;

import React，{Component}来自“React”；
从“react router dom”导入{withRouter}；
从“react redux”导入{connect}；
从“/../Common/index”导入{Pagination}；
类应用程序扩展组件{
handlePageination=（当前）=>{
console.log（'trigger'）
}
render（）{
返回(
0？totalCount:0}范围={10}初始={0}行单击={this.handlePageination}计数={currentPageNumber}/>
)
}
}
导出默认应用程序；

子组件

import React, { Component } from "react";
import ReactPaginate from 'react-paginate';
import { ORIGIN_PATH } from "./../../../utilities/consts";
import "./Pagination.css";

class Pagination extends Component {

    handlePageClick = (e) => {
        this.props.rowClick(e.selected)
    }

    render() {

        const { range, initial } = this.props;

        let { count, total } = this.props;

        count = count + 10;
        total = parseInt(total, 10);

        if(count===0 && total < 10) {
            count = total
        } else if(count >= total) {
            count = total
        }

        return(
            <div className="pagination-block">
                <p>Showing {count} out of {total} results</p>
                {<ReactPaginate previousLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-prev-icon@3x.png"} alt="Prev" />}
                    nextLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-next-icon@3x.png"} alt="Next" />}
                    breakLabel={<a href="">...</a>}
                    breakClassName={"break-me"}
                    pageCount={total/range}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={range}
                    onPageChange={this.handlePageClick}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    initialPage={initial}
                    activeClassName={"active"} />}
            </div>
        )
    }
}

export default Pagination;

import React，{Component}来自“React”；
从“react paginate”导入react paginate；
从“/../../../../utilities/consts”导入{ORIGIN_PATH}；
导入“/Pagination.css”；
类分页扩展了组件{
HandlePage点击=（e）=>{
this.props.row单击（e.selected）
}
render（）{
const{range，initial}=this.props；
让{count，total}=this.props；
计数=计数+10；
总计=parseInt（总计，10）；
如果（计数===0&&total<10）{
计数=总数
}否则如果（计数>=总数）{
计数=总数
}
返回(
显示{total}结果中的{count}

{}
)
}
}
导出默认分页；

在使用“渲染用户箭头”函数中的“单击”函数时，在子组件中更改此选项

onPageChange={(e) => this.handlePageClick()}

---

在

分页中

组件渲染

改变

 onPageChange={this.handlePageClick}

到

更正代码如下

import React, { Component } from "react";
import ReactPaginate from 'react-paginate';
import { ORIGIN_PATH } from "./../../../utilities/consts";
import "./Pagination.css";

class Pagination extends Component {

    handlePageClick = (e) => {
        this.props.rowClick(e.selected)
    }

    render() {

        const { range, initial } = this.props;

        let { count, total } = this.props;

        count = count + 10;
        total = parseInt(total, 10);

        if(count===0 && total < 10) {
            count = total
        } else if(count >= total) {
            count = total
        }

        return(
            <div className="pagination-block">
                <p>Showing {count} out of {total} results</p>
                {<ReactPaginate previousLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-prev-icon@3x.png"} alt="Prev" />}
                    nextLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-next-icon@3x.png"} alt="Next" />}
                    breakLabel={<a href="">...</a>}
                    breakClassName={"break-me"}
                    pageCount={total/range}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={range}
                    onPageChange={e => this.handlePageClick(e)}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    initialPage={initial}
                    activeClassName={"active"} />}
            </div>
        )
    }
}

export default Pagination;

import React，{Component}来自“React”；
从“react paginate”导入react paginate；
从“/../../../../utilities/consts”导入{ORIGIN_PATH}；
导入“/Pagination.css”；
类分页扩展了组件{
HandlePage点击=（e）=>{
this.props.row单击（e.selected）
}
render（）{
const{range，initial}=this.props；
让{count，total}=this.props；
计数=计数+10；
总计=parseInt（总计，10）；
如果（计数===0&&total<10）{
计数=总数
}否则如果（计数>=总数）{
计数=总数
}
返回(
显示{total}结果中的{count}

{this.handlePage单击（e）}
containerClassName={“分页”}
SubcainerClassName={“页面分页”}
initialPage={initial}
activeClassName={“活动”}/>}
)
}
}
导出默认分页；

import React, { Component } from "react";
import ReactPaginate from 'react-paginate';
import { ORIGIN_PATH } from "./../../../utilities/consts";
import "./Pagination.css";

class Pagination extends Component {

    handlePageClick = (e) => {
        this.props.rowClick(e.selected)
    }

    render() {

        const { range, initial } = this.props;

        let { count, total } = this.props;

        count = count + 10;
        total = parseInt(total, 10);

        if(count===0 && total < 10) {
            count = total
        } else if(count >= total) {
            count = total
        }

        return(
            <div className="pagination-block">
                <p>Showing {count} out of {total} results</p>
                {<ReactPaginate previousLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-prev-icon@3x.png"} alt="Prev" />}
                    nextLabel={<img src={ORIGIN_PATH + "/images/icons/polygon-next-icon@3x.png"} alt="Next" />}
                    breakLabel={<a href="">...</a>}
                    breakClassName={"break-me"}
                    pageCount={total/range}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={range}
                    onPageChange={e => this.handlePageClick(e)}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    initialPage={initial}
                    activeClassName={"active"} />}
            </div>
        )
    }
}

export default Pagination;