javascript - 在 ReactJS 中按属性动态过滤

Question

我有一个 Javascript 对象数组，我通过映射以显示在表格中

很长，我有一个分页组件，它在我的主要 App.js 组件中有一个事件处理程序

onPageChanged = data => {
const { countries } = this.state;
const { currentPage, totalPages, pageLimit } = data;

const offset = (currentPage - 1) * pageLimit;
const currentCountries = countries.slice(offset, offset + pageLimit);

this.setState({ currentPage, currentCountries, totalPages });

 };

在这里我传递了值，我用它来显示每个页面上的元素数量，以及当前页面等。

我有一种按地区过滤的过滤方法

sortRegion = () =>{
   const newCountries =this.state.currentCountries.filter(country => 
   country.region === this.state.region);
   console.log(this.state.region)
   console.log(newCountries)
   this.setState({currentCountries: newCountries})
  }

截至目前，我有一个输入表单，带有一个 onChange 处理程序来更改region属性的状态

   {this.state.countries &&
      <div>
      <input type="text" placeholder="Get Region" value={this.state.region}  onChange={(e) => {this.setState({region: e.target.value)}}/>
      <button onClick={this.sortRegion}>Get country by Regions</button>
    <Pagination
     totalRecords={this.state.countries.length}
     pageLimit={4}
     pageNeighbours={1}
     onPageChanged={this.onPageChanged}
     />
     </div>
      }

当我按下按钮时，这工作正常，但我希望它是动态的，所以只要有东西改变它就会排序。

我最初的目的是向 setState 传递一个回调来调用处理程序，但这并没有显示任何结果

          <input type="text" placeholder="Get Region" value={this.state.region}  onChange={(e) => {this.setState({region: e.target.value}, this.sortRegion)}}/>

如何使排序动态化，使其在表单内的 onChange 上起作用？

标签： javascriptreactjs