«TypeError: this.props.changeFormStatus не является функцией» при попытке передать функцию дочернему компоненту - PullRequest
Новая
       16

«TypeError: this.props.changeFormStatus не является функцией» при попытке передать функцию дочернему компоненту

0 голосов
/ 26 сентября 2019

Я пытаюсь передать функцию дочернему компоненту, который будет вызывать логику, которая будет отображать простую текстовую форму на моей веб-странице после нажатия кнопки, но я получаю сообщение об ошибке:

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;

1 Ответ

0 голосов
/ 26 сентября 2019

Посмотрите на компонент, который вы отображаете и передаете функцию.Вы написали это: 

<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.

...