尝试将函数传递给子组件时出现“TypeError：this.props.changeFormStatus 不是函数”答案

【问题标题】："TypeError: this.props.changeFormStatus is not a function" when trying to pass a function to a child component尝试将函数传递给子组件时出现“TypeError：this.props.changeFormStatus 不是函数”
【发布时间】：2020-01-26 04:37:23
【问题描述】：

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

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;

【问题讨论】：

您没有在 RenderIcon 中定义 changeFormStatus 函数，因此它不是函数：它是未定义的。当您还使用道具传递它时，为什么要为该类定义 whenUserClicks 也不清楚。你有什么问题？
见：stackoverflow.com/questions/26176519/reactjs-call-parent-method

标签： javascript html reactjs react-native web-deployment-project

【解决方案1】：

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

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

这意味着在 RenderIcon 组件内部，该函数现在被命名为 this.props.whenUserClicks

在您的外部组件中，该函数被命名为 this.changeFormStatus。但是在内部组件中，它被命名为this.props.whenUserClicks。

另外，您没有调用 this.props.whenUserClicks。您在子组件中创建了一个名为 this.whenUserClicks 的新函数

另外，在你的子组件中，你有这个：

  <div onClick={this.whenUserClicks()}></div>

你想把它改成

 onClick={(e)=>{
     this.whenUserClicks()
 }

或

 onClick={this.whenUserClicks}

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

【讨论】：