代码更新了搜索字段,但是当我将其与另一个字段一起使用时 功能不起作用。
下面一行显示控制台中的值, console.log(this.state.seachfield,'seachfield') 但不适用于filterRobots。
filterRobots运作正常 如果我使用event.target.value而不是this.state.searchfield。
//imports
import React , {Component}from 'react';
import {robots} from './robots';
import CardList from './CardList';
import Searchbox from './Searchbox';
//main app
class App extends Component{
constructor(){
super()
this.state={
robots : robots,
searchfield : ""
}
}
//the on change event, update searcfield.
OnSearchChange =(event) =>{
this.setState({seachfield : event.target.value})
}
render(){
console.log(this.state.seachfield, 'seachfield');
//filter by name
const filteredRobots = this.state.robots.filter(robot =>{
return robot.name.toLowerCase().includes(this.state.searchfield)
})
console.log(filteredRobots);
return(
<div className="tc">
<h1> Robots Title </h1>
<Searchbox searchchange={this.OnSearchChange}/>
<CardList robots={filteredRobots}/>
</div>
);
}
}
export default App;