预期的"onChange"侦听器是一个函数，而是获得"对象"类型的值

Question

我是反应和练习反应的新手。在构建我的反应应用程序来处理事件时更改我总是收到错误错误：预期onChange侦听器是一个函数，而是获得了object类型的值。

我也尝试过这样做 onChange={((=> searchChange} 它仍然没有打印事件。

搜索框组件

import React from 'react';
const SearchBox=(searchfield,searchChange)=>{
return (
<div className='pa2'>
<input
className='pa3 ba b--green bg-lightest-blue' 
type='search' 
placeholder='search robots'
onChange={searchChange}
/>
</div>
);
}
export default SearchBox;

应用组件

import React,{Component} from 'react';
import Cardlist from './Cardlist';
import {robots} from './robots';
import SearchBox from './SearchBox';
class App extends Component{
constructor(){
super();
this.state={
robots:robots,
searchfield:''
}
}
onSearchChange=(event)=> {
console.log(event);
}
render(){
return(
<div className='tc'>
<h1> RoboFriends </h1>
<SearchBox searchChange={this.onSearchChange}/>
<Cardlist robots={this.state.robots} />
</div>
);
}
}
export default App;

我想在控制台上打印事件。

Answer 1

您正在将道具searchChange从App传递到SearchBox组件 -

<SearchBox searchChange={this.onSearchChange}/>

但是你在这里用错了——

const SearchBox=(searchfield,searchChange)=>{

将SearchBox的解构道具改为——

const SearchBox=({ searchfield,searchChange })=>{