Question

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

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;

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不是函数”

1 个答案: