时间戳

首页 > 解决方案 > 无法将道具中的功能传递给组件 | 反应

javascript - 无法将道具中的功能传递给组件 | 反应

问题描述

我正在尝试将函数 onSearchChangeEvent() 从我的 App.js 作为函数传递给 Searchbox 组件，但我收到错误消息

预期onChange的侦听器是一个函数，而不是一个 object类型的值。

我在 Stackoverflow 上查找了相同错误的不同答案，但我无法解决此问题。

App.js ：包含我试图传递给< Searchbox />组件的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;

搜索框.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;

错误：首先我收到警告，当触发事件时我收到错误

标签： javascriptreactjsreact-props

解决方案

您没有在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函数

推荐阅读