渲染功能自动触发React中的onClick道具功能问题? [英] render function automatically trigger onClick props function issue in React?
本文介绍了渲染功能自动触发React中的onClick道具功能问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在父组件中只有一个子组件。在儿童部分,我有一个带有点击功能的道具。在该单击功能中,在渲染组件时单击之前触发。我需要限制渲染中的单击功能。检查下面的代码...
In parent component have one child component. In Child component I have one props with click function. In that click function, triggering before click while rendering component. I need to restrict that click function in render. Check below my code...
我的父组件是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;
推荐答案
在使用点击功能时在子组件中更改此设置内部呈现用户箭头功能
change this in your child component while your using click function inside render user arrow function
onPageChange={(e) => this.handlePageClick()}
这篇关于渲染功能自动触发React中的onClick道具功能问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文