onClick 功能不适用于锚标记

Question

• 我是新手。
• 我的锚标记中的 onClick 函数没有调用 hidePopover 函数。
• 我什至在 hidePopover 函数中提供了调试器，当我单击 a 标签时，它并没有停在那里
• 你们能告诉我为什么它不打电话吗？

• 在下面提供我的代码

  是的，我检查了控制台，它返回未定义，你能告诉我如何解决它this.onclick null this.hidePopover undefined this.onClick undefined this.props undefined this.Function function Function() { [native code] }

import React, {Component} from 'react';
import {connect} from 'react-redux';
import SportsBody from '../../components/scores/tracker/score-tracker-ira';
import Player from '../../components/player/snapshot/player-snapshot-presenter-ira';
import {setSidebarAppMode} from 'sports-template-standard/lib/redux/layout/layout-actions';
import {updateMenu} from '../../redux/menu/menu-actions';
import {Overlay} from 'sports-modal';
import SportsDefect from 'sports-logger';
import {version} from '../../../package.json';



const sportsDefect = new SportsDefect();

class KickIra extends Component {
    constructor(props) {
        super(props);

        this.state = {popoverIsActive: true};

        this.launchGoalDetails = this.launchGoalDetails.bind(this);
        this.hidePopover = this.hidePopover.bind(this);
        this.sportsFollow = this.sportsFollow.bind(this);
    }

    componentDidMount() {
        sportsDefect.log('IRA Rollover Kick View Loaded  Ver:' + version);
    }

    launchGoalDetails() {
        this.props.dispatch(setSidebarAppMode(true));
        this.props.dispatch(updateMenu('score-details'));
        window.scrollTo(0, 0);
    }

    **hidePopover() {
        console.log("insidePopup")
        debugger;
        this.setState({popoverIsActive: false});
    }**

    sportsFollow() {
        const urlToLaunch = `/inet/iraRollover/IraRollOver/InvRolloverLandingPage?fundId=${this.props.playerInfo.fundingDetailId}`;
        window.open(urlToLaunch, '_self');
    }

    getHeaderContent() {
        const {profile} = this.props;

        return (
            <span>
                <div className="title">WELCOME{profile && profile.firstName && `, ${profile.firstName}`}!</div>
                <div className="subTitle">Digital Investment Adviser</div>
            </span>
        );
    }

    static basketballContent() {
        return (
            <p>
                If you want to know more about the status of your IRA Rollover, use the link below
                to visit the IRA Rollover Tracker on our website.
            </p>       
        );
    }

    /*static basketballContentNoChange() {
        console.log("inside  basketballContentNoChange---->");
        return (
            <div></div>
        );
    }*/

    static popupFooter() {
        //debugger;
        return (
            <div>
                <a className="closeButton" href="javascript:;" onClick={this.hidePopover}>Close</a>
                <a className="iraRollover sports-modal-trigger" href="javascript:;" onClick={this.sportsFollow}>Check Out IRA Rollover Tracker</a> 
            </div>       
        );
    }

    /*static popupFooterClose() {
        return (
            <a className="closeButton" href="javascript:;" onClick={this.hidePopover}>Close</a>
        );
    }*/

    render() {

        //console.log("summary-ira this.props.playerInfo.fundingDetailId ---->" + this.props.playerInfo.fundingDetailId);
        //debugger;

        /*if(this.props.playerInfo.fundingDetailId === undefined || this.props.playerInfo.fundingDetailId === '' ) {

        }*/
        return (
            <span>
                <section className="gray-box snapshotContainer">
                    <div className="flex-container flex-2">
                        <div className="snapshot flex-item">
                            <Overlay
                                className="popover--IRA"
                                active={this.state.popoverIsActive}
                                headerTitle={this.getHeaderContent()}
                                enableCloseShortcuts={true}
                                maxWidth={800}
                                onClose={this.hidePopover}
                            >
                                <div className="dia-popover-content level1">
                                    <p>
                                        As you requested, we are in the process of rolling over the balance from your qualified plan to your new IRA.
                                    </p>
                                </div>
                                <div className="dia-popover-content level2 dia-text-center">
                                    <p>
                                        Feel free to take a look around your new dashboard; this is where we'll show you what's
                                        happening with your new investment player.
                                    </p>
                                    <p>
                                        There isn't much to display yet, so don't let that concern you.
                                    </p>

                                    {/*(this.props.playerInfo.functionDetailId !== null ||
                                     this.props.playerInfo.fundingDetailId !== '' ||
                                      this.props.playerInfo.fundingDetailId !== undefined ) && 
                                       KickIra.basketballContent()*/}


                                    {
                                        this.props.playerInfo.fundingDetailId === null || this.props.playerInfo.fundingDetailId === '' || this.props.playerInfo.fundingDetailId === undefined ?
                                            null :
                                            KickIra.basketballContent()
                                    }
                                </div>
                                <div className="dia-popover-content level3">

                                    {
                                        this.props.playerInfo.fundingDetailId === null || this.props.playerInfo.fundingDetailId === '' || this.props.playerInfo.fundingDetailId === undefined ?
                                            KickIra.popupFooterClose() :
                                            KickIra.popupFooter()
                                    }

                                </div>
                            </Overlay>
                            <SportsBody />
                        </div>

                        <div className="snapshot flex-item">
                            <Player />
                        </div>
                    </div>
                </section>
            </span>
        );
    }
}

KickIra.propTypes = {
    playerInfo: React.PropTypes.object,
    scoreDetails: React.PropTypes.object,
    profile: React.PropTypes.object
};

export default connect(state => ({
    scoreDetails: state.scoreDetails,
    playerInfo: state.player,
    profile: state.template.profile
}))(KickIra);

Answer 1

基本上我没有给出关于 React 的解决方案，但它与任何函数式构造函数一样。 可以使用以下内容，以便在每个功能/模块中为您提供一个类的实例。

class KickIra extends Component {
    constructor(props) {
        super(props);

        this.state = {popoverIsActive: true};
        this.self = this;
        this.launchGoalDetails = this.launchGoalDetails.bind(this);
        this.hidePopover = this.hidePopover.bind(this);
        this.sportsFollow = this.sportsFollow.bind(this);
    }
   ......
   ......
 }

然后，用它来调用函数：

onClick={self.hidePopover}

Answer 2

在 react onClick 元素中应该使用类似

onClick={()=>{

  }}

使用粗箭头符号为您执行绑定操作，您现在可以将方法调用为 this.function()