"TypeError: this.props.changeFormStatus is not a function" when trying to pass a function to a child component

Question

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

TypeError: this.props.changeFormStatus is not a function

父组件代码如下：

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 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 被点击。

"TypeError: this.props.changeFormStatus is not a function" when trying to pass a function to a child component

"TypeError: this.props.changeFormStatus is not a function" when trying to pass a function to a child component

html

javascript

web-deployment-project

reactjs

react-native