Невозможно передать функцию в подпорке компоненту |реагировать

Question

Я пытаюсь передать функцию onSearchChangeEvent () из моего App.js в компонент Searchbox как функцию, но я получаю сообщение об ошибке, говорящее, что

Ожидаемый onChange слушатель будет функцией,вместо этого получил значение object type.

Я искал разные ответы на Stackoverflow на ту же ошибку, но не могу решить эту проблему.

App.js: Содержит функцию onSearchChangeEvent () Я пытаюсь перейти на компонент .

import React, {Component} from 'react';
import Cardlist from './Cardlist';
import Searchbox from './Searchbox';
import {robots} from './robots';

class App extends Component {
    constructor () {
        super()
        this.state = {
            robots : robots,
            searchfield : ''
        }
    }

    onSearchChangeEvent = () => {
        console.log("Something Happened");
    }

    render () {
        return (
            <div className='tc'>
                <h1>Robo Friends</h1>
                <Searchbox searchChange={() => this.onSearchChangeEvent}/>     
                <Cardlist robots={this.state.robots} />
            </div>
        );
    }
}

export default App;

Searchbox.js

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;

Ошибка: Сначала я получаю предупреждение, когда событие срабатывает, я получаю ошибку

Answer 1

Вы неправильно обращаетесь к реквизиту в компоненте SearchBox.Вам нужно будет их деструктурировать вместо того, чтобы определять их как аргументы

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>
    );
}

и передавать их как

<Searchbox searchChange={this.onSearchChangeEvent}/>  

или

 <Searchbox searchChange={() => this.onSearchChangeEvent()}/>  

Хотя вы должны предпочесть <Searchbox searchChange={this.onSearchChangeEvent}/>, так как вы уже используете функцию стрелки при определении onSearchChangeEvent function