reactjs - 预期 `onChange` 监听器是一个函数，但得到了 `object` 类型的值

Question

我是 react 和练习 react 的新手。在构建处理 onChange 事件的 react 应用程序时，我总是收到错误错误:预期 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

您正在传递一个 Prop searchChange来自App至SearchBox组件 -

<SearchBox searchChange={this.onSearchChange}/>

但是你在这里用错了 -

const SearchBox=(searchfield,searchChange)=>{

更改 SearchBox 的解构 props至-

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