функция рендера автоматически вызывает проблему с функцией поддержки onClick в React? - PullRequest
Новая
       10

функция рендера автоматически вызывает проблему с функцией поддержки onClick в React?

0 голосов
/ 17 октября 2018

В родительском компоненте есть один дочерний компонент.В дочернем компоненте у меня есть один реквизит с функцией щелчка.В этой функции клика, запуск перед щелчком во время рендеринга компонента.Мне нужно ограничить эту функцию щелчка в рендере.Проверьте ниже мой код ...

У меня есть родительский компонент APP. 

    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 } 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;

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

В вашем Pagination компонентном рендере

Изменить 

 onPageChange={this.handlePageClick}

на 

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

Исправленный код ниже 

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;
0 голосов
/ 17 октября 2018

измените это в вашем дочернем компоненте, в то время как вы используете функцию click внутри функции визуализации стрелка пользователя 

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