React Parent to Children 事件处理值传递

Question

I have two component
Read Mode and Pagination

Read Mode Component

     state = {
            currentPdf:[],
            currentPage: null,
            totalPages: null,
            intialState:1,
        };
        constructor(props) {
            super(props);
            this.onChangePage = this.onChangePage.bind(this);
            this.onCurrentPageNo = this.onCurrentPageNo.bind(this);
            this.onTotalPage = this.onTotalPage.bind(this);

        }
        componentDidMount() {
            this.props.fetchPdfContent();
        }
        onCurrentPageNo(currentPageNo){
            this.setState({ currentPage: currentPageNo });
        }
        onChangePage(currentPdf) {
            this.setState({ currentPdf: currentPdf });
        }
        onTotalPage(totalpages){
            this.setState({ totalPages: totalpages });
        }
        gotoPrevPage = (currentTarget) => {
            if (this.state.currentPage > 1) {
                let prevPage = this.state.currentPage - 1;
                this.setState({ intialState: prevPage });
            }
        }

     render() {
       return (
          <button className="btn btn-primary prev-btn pageBtn" onClick={this.gotoPrevPage.bind(this)}>
                 <span aria-hidden="true" className="icon-ico_arrow-right icomoon"> Left </span>
          </button>
          <Pagination initialPage={intialState} items={pdfcontnet} onTotalPage={this.onTotalPage} onChangePage={this.onChangePage} onChangePageNo={this.onCurrentPageNo} />
        )
      }

Pagination Component

     constructor(props) {
            super(props);
            this.state = { pager: {} };
        }
        componentDidMount() {
            // set page if items array isn't empty
            if (this.props.items && this.props.items.length) {
                this.setPage(this.props.initialPage);
            }
        }
        componentDidUpdate(prevProps, prevState) {
            // reset page if items array has changed
            this.setPage(this.props.initialPage);
        }
        setPage(page) {
            console.log(page + 'pages');
            var items = this.props.items;
            var pager = this.state.pager;
            if (page < 1 || page > pager.totalPages) {
                return;
            }
            // get new pager object for specified page
            pager = this.getPager(items.length, page);
            // get new page of items from items array
            var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
            // update state
            this.setState({ pager: pager });
            // call change page function in parent component
            this.props.onChangePage(pageOfItems);
        }

when i click the gotoPrevPage () initalState value need to pass

this.setPage(this.props.initialPage);

if i assign componentDidUpdate() state I got

Answer 1

try this:

onClick={()=>this.gotoPrevPage.bind(this)}

Answer 2

You need to change initialPage={intialState} to initialPage={this.state.intialState} in your Read Mode Component render method.

PS: You should actually spell it initial , not intial .

Answer 3

Your state object should be inside your constructor function in ReadMode. You should also be using this.setState({}) to update state. You also shouldn't be trying to reload the entire DOM when a new item is added the way you are in the Pagination component via commponentDidUpdate . React uses a virtual DOM and doesn't need to reload every element on the page every time one element is updated. It looks like part of your problem is your App continuously updates and you're getting stuck in a never ending loop updating the DOM.

Also, you might not need Pagination to have local state. You could store the state/data in the parent container and just pass it to Pagination via props . React uses one-way data flow and you should familiarize yourself with passing props from a parent component to a child component.

Brush up on state and lifecycle functions by reading the documentation , get an understanding of how React uses the virutal DOM to update elements, and rewrite your App so that state is stored mainly in the parent component and is passed via props to the child component.

Overlooking basic React concepts and structuring your project in a less than ideal way is the source of your problems.