onClick function not working for anchor tag

问题:

• i am new to react.
• my onClick function in the anchor tag is not calling the hidePopover function.
• i even gave debugger inside hidePopover function and its not stopping there, when I click the a tag
• can you guys tell me why its not calling.

• providng my code below

  yeah i checked in console, its returning undefined, can you tell me how to fix it 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);

回答1:

Basically I am not giving solution on React, but it is same as any functional constructor thingy. May be use the below, in order to have a instance of you class available to you in every function/ module.

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);
    }
   ......
   ......
 }

Then, use it to call function:

onClick={self.hidePopover}

回答2:

In react onClick elements should be used in something like

onClick={()=>{

  }}

using the fat arrow notation does the binding thing for you and you can call the method now as this.function()