javascript - ReactJS 中的搜索和页面

问题描述

我正在通过列出表格中显示的数据并从输入中过滤来使用 ReactJS。

只要您从第 1 页开始，搜索就可以正常工作。如果我从与第一个页面不同的页面进行搜索，并且输入的数据不存在于我发现表格中的数据的页面中消失并返回，直到我消除搜索词。

这是我的代码：

状态：

  state = {
    searchText: '',
    currentPage: 1,
    itemsOnPage: 3,
  };

带过滤器的表：

  dataTable = () =>{

const { currentPage, itemsOnPage, searchText } = this.state;
const { clients } = this.props;

const filterData = clients.filter( client => {
  return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
})

const indexOfLastItem = currentPage * itemsOnPage;
const indexOfFirstItem = indexOfLastItem - itemsOnPage;
const currentItems = filterData.slice(indexOfFirstItem, indexOfLastItem);


const renderItems = currentItems.map((data, key) => {
      return (

        <Client
          key={key}
          client ={data}
        />
      )
    });
    return renderItems;
  }

分页：

  paginationNumbers = () =>{
    const { clients } = this.props;
    const { itemsOnPage, searchText } = this.state;
    const filterData = clients.filter( client => {
      return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
    })
    const pagesToNumbers = [];
    for (let i = 1; i <= Math.ceil(filterData.length / itemsOnPage); i++) {
      pagesToNumbers.push(i);
    } 

    let lastItem = pagesToNumbers[pagesToNumbers.length-1];

    const numbers = pagesToNumbers.map(number => {
      return (
          <li className="waves-effect"
           key={number} 
           id={number}
           className={ this.state.currentPage === number ? "active" : null }
           onClick={this.handleClick} style={ styles.paginationButtons }
           >
               {number}
          </li>
      );
    });

    return (
      <React.Fragment>
        <li className={ this.state.currentPage === 1 ? "hide" : "waves-effect" }
        onClick={this.handlePrevious}
        >
        <i className="material-icons">chevron_left</i></li>
          { numbers }
        <li className={ this.state.currentPage === lastItem ? "hide" : "waves-effect" }
         onClick={this.handleNext}
        >
        <i className="material-icons">chevron_right</i></li>
      </React.Fragment>
    );
  }

按钮动作：

  handlePrevious = () => {
    this.setState({
      currentPage: this.state.currentPage -1 
    })
  }

  handleNext = () => {
    this.setState({
      currentPage: this.state.currentPage +1 
    }) ;
  }

  handleClick = (e) => {
    this.setState({
        currentPage: Number(e.target.id)
      });
  }

在更改输入以过滤：

  onChange = e => {
    this.setState({ searchText: e.target.value });
  }

这里是渲染代码：

        <input
            name="searchText"
            value={searchText}
            onChange={this.onChange}
          />  

      <div className="col s12">
          <input
            name="searchText"
            value={searchText}
            onChange={this.onChange}
          />
      </div>

非常感谢！

标签： javascriptreactjsdatatable

javascript - ReactJS 中的搜索和页面

问题描述

解决方案

推荐阅读