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

到目前为止，我有一个region属性的输入窗体，带有一个onChange处理程序以更改状态

   {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上起作用？

在ReactJS中动态按属性过滤

0 个答案: