Javascript &引用；类型错误：this.props.changeFormStatus不是函数；尝试将函数传递给子组件时

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

TypeError: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;

从“React”导入React；
从“react dom”导入react dom；
从“/RenderIcon”导入RenderIcon；
从“/RenderForm”导入RenderForm；
类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={formStatus:false}；
this.changeFormStatus=this.changeFormStatus.bind（this）；
}
changeFormStatus（）{
this.setState（{formStatus:true}）；
}
render（）{
返回(
{this.props.columnName}
);
}
};
导出默认列；

下面是子组件的代码：

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;

从“React”导入React；
从“react dom”导入react dom；
类RenderIcon扩展了React.Component{
建造师（道具）{
超级（道具）；
}
whenUserClicks（）{
console.log（this.props）；
this.props.changeFormStatus（）；
};
render（）{
返回(
{this.props.iconMeaning}
);
}
}
导出默认渲染；

查看正在渲染并将函数传递给的组件。你写了这个：

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

或

---

如果您像以前那样调用函数，那么该函数将在加载页面时立即运行，而不是等待单击div。

您没有在RenderIcon中定义changeFormStatus函数，因此它不是一个函数：它是未定义的。还不清楚为什么在使用道具传递该类时，要为该类定义WhenUserClick。你的问题是什么？参见：

 onClick={this.whenUserClicks}