javascript - searchChange 未定义 no-undef
问题描述
SearchBox.js 文件是:
import React from 'react';
const SearchBox = ({ searchfield, searchChanger}) => {
return (
<div className='pa2'>
<input
className='pa3 b--green bg-light-blue'
type='search'
placeholder='search robots'
onChange={searchChange}
/>
</div>
);
}
export default SearchBox;
App.js 文件是:
import React, { Component } from 'react';
import CardList from './CardList';
import SearchBox from './SearchBox';
import { robots } from './robots';
import './App.css';
class App extends Component {
constructor() {
super()
this.state = {
robots: robots,
searchfield:''
}
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => {this.setState({ robots: robots})});
}
onSearchChange = (event) => {
this.setState({ searchfield: event.target.value })
}
render() {
const filteredRobots = this.state.robots.filter(robots => {
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
})
if (robots.length ===0) {
return <h1>Loading</h1>
}
else {
return (
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<SearchBox searchChange={this.onSearchChange}/>
<CardList robots={filteredRobots} />
</div>
);
}
}
}
export default App;
我可以通过更改 App.js 文件中的导入顺序来摆脱这个错误,但后来无论我做什么都会显示这个错误?如果我有任何打字问题,请帮忙,如果没有,那是什么问题
解决方案
你的搜索框应该是:
const SearchBox = ({ searchfield, searchChange}) => {
return (
<div className='pa2'>
<input
className='pa3 b--green bg-light-blue'
type='search'
placeholder='search robots'
onChange={searchChange}
/>
</div>
);
}
export default SearchBox;
在您的道具中有不正确的 searchChanger。
推荐阅读
- javascript - 我不明白为什么我的代码不起作用
- git - 有没有办法让 Git 打印出两次提交之间的“快进”任务?
- multidimensional-array - 有没有办法从多维列表中打印出单个值?请在python中
- python - Discord.py 检查是否创建了新角色/表情符号
- docker - Kubernetes:盲目使用 RollingUpdate 安全吗?
- javascript - 如何将视频中的每一帧控制台记录为字节数组?
- javascript - 更新界面元素以跟随 React 中的外部对象
- loops - 如何在 Ansible 中使用 with_sequence
- c# - LINQ:查询语法 - 我如何识别收入高于其他人的每个人?
- node.js - 使用 Clinic.js 问题分析 nodejs 应用程序