[英]Filter with setState not working. React
我有該代碼,我沒有得到過濾。 我想過濾所有帶有字母“ a”的內容,但看起來SetState無法正常工作。 我找不到錯誤,有人可以幫助我嗎?
它看起來像是setstate不起作用。 在哪里“ a”將是輸入值。
我嘗試創建一個搜索功能,以呈現與搜索文本輸入匹配的人員的姓名。
class Pagination extends React.Component { constructor() { super(); this.state = { elementsPerPage:3, currentPage:0, peoples:[ {id:0, name:"aaa"}, {id:1, name:"bb"}, {id:2, name:"aa"}, {id:3, name:"cc"}, {id:4, name:"dada"}, {id:5, name:"Daddi"}, {id:6, name:"Dwe"}, {id:7, name:"ta"}, {id:8, name:"lala"}, {id:9, name:"lele"}, {id:10, name:"f"}, {id:11, name:"a"}], input: "", filtered: [], }; this.nextPage = this.nextPage.bind(this); this.previousPage = this.previousPage.bind(this); this.filterNames = this.filterNames.bind(this); this.getValueInput = this.getValueInput.bind(this); } getValueInput (value) { this.setState({ input: value.target.value }); } filterNames (){ const {peoples, filtered} = this.state; console.log(this.state.filtered) this.filtered = this.state.filtered.filter(item => item.includes('a')) this.setState({filtered: this.filtered }) } elementsOnScreen () { const {elementsPerPage, currentPage, peoples} = this.state; const namesInFiltered = this.state.filtered = peoples.map(item => item.name) return namesInFiltered.map((nome) => <li>{nome}</li>) .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage) } nextPage () { const {elementsPerPage, currentPage, peoples} = this.state; if((currentPage+1) * elementsPerPage < peoples.length){ this.setState({ currentPage: this.state.currentPage + 1 }); console.log(this.state.currentPage) } } previousPage () { const { currentPage } = this.state; if(currentPage - 1 >= 0){ this.setState({ currentPage: this.state.currentPage - 1 }); } } render() { return ( <div> <input type="text" onChange={ this.getValueInput }></input> <button className='search' onClick={this.filterNames}> Search </button> <button onClick={this.previousPage}> Previous </button> <button onClick={this.nextPage}> Next </button> <ul>Names: {this.elementsOnScreen()}</ul> <h3>Current Page: {this.state.currentPage}</h3> </div> ); } } ReactDOM.render( <Pagination/>, document.getElementById('root') )
<div id="root"></div>
讓我們整理一些東西。 people
實際上不是國家,而是財產。 同樣,您在您的狀態中造成一些混亂,電子調料實際上根本不應該是該狀態的一部分
function keyIncludes(key, value) {
return el => el[key].includes(value);
}
function onPage(page, perPage) {
return (_, i) => i >= (page - 1) * perPage && i < page * perPage;
}
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = {
elementsPerPage:3,
currentPage:0,
input: ""
};
}
elementsOnScreen() {
return this.props.people
.filter(keyIncludes("name", this.state.input))
.filter(onPage(this.state.currentPage, this.state.elementsPerPage));
}
render() {
return (
<div>
<input type="text" onChange = {() => this.handleChange()} />
<button onClick={() => this.previousPage()}> Previous </button>
<button onClick={this.nextPage}> Next </button>
<ul>Names: {this.elementsOnScreen()}</ul>
<h3>Current Page: {this.state.currentPage}</h3>
</div>
);
}
/*...*/
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.