尝试将函数传递给子组件时出现“TypeError: this.props.change

Question

我正在尝试将一个函数传递给一个子组件，该函数将触发逻辑，在按下按钮后在我的网页上显示一个简单的文本表单，但我收到错误消息：

类型错误：this.props.changeFormStatus 不是函数

下面是父组件的代码：

import React from 'react';

import ReactDom from 'react-dom';

import RenderIcon from "./RenderIcon";

import RenderForm from "./RenderForm";

class RetroColumn extends React.Component {

    constructor(props) {

        super(props);

        this.state = {formStatus:false};

        this.changeFormStatus = this.changeFormStatus.bind(this);

    }

    changeFormStatus() {

        this.setState({formStatus:true});

    }

    render() {

        return (

            <div className="column">

                <div className="ui segment">

                    <h1 className="ui header">

                        <RenderIcon iconName="minus" iconMeaning="Remove"/>

                        {this.props.columnName}

                        <RenderIcon iconName="plus" whenUserClicks={this.changeFormStatus} iconMeaning="Add"/>

                    </h1>

                    <RenderForm revealForm={this.state.formStatus}/>

                </div>

            </div>

        );

    }

};

export default RetroColumn;

这是子组件的代码：

import React from 'react';

import ReactDom from 'react-dom';

class RenderIcon extends React.Component{

    constructor(props){

        super(props);

    }

    whenUserClicks() {

        console.log(this.props);

        this.props.changeFormStatus();

    };

    render() {

        return (

            <div className="ui vertical animated button" tabIndex="0" onClick={this.whenUserClicks()}>

                <div className="hidden content">{this.props.iconMeaning}</div>

                <div className="visible content">

                    <i className={`${this.props.iconName} icon`}></i>

                </div>

            </div>

        );

    }

}

export default RenderIcon;

Answer 1

查看您正在呈现并向其传递函数的组件。你写了这个：<RenderIcon&nbsp;iconName="plus"&nbsp;whenUserClicks={this.changeFormStatus}&nbsp;iconMeaning="Add"/>这意味着在 RenderIcon 组件内部，该函数现在被命名为 this.props.whenUserClicks在您的外部组件中，该函数名为 this.changeFormStatus。但是在内部组件中，它被命名为 this.props.whenUserClicks。此外，您不是在调用 this.props.whenUserClicks。您在子组件中创建了一个名为 this.whenUserClicks 的新函数此外，在您的子组件中，您有：&nbsp;&nbsp;<div&nbsp;onClick={this.whenUserClicks()}></div>你想把它改成&nbsp;onClick={(e)=>{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.whenUserClicks() &nbsp;}或者&nbsp;onClick={this.whenUserClicks}如果您像以前一样调用该函数，那么该函数将在页面加载时立即运行，而不是等待 div 被点击。