onClick函数不适用于锚标记 [英] onClick function not working for anchor tag

问题描述

提供我的代码

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

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

推荐答案

In react onClick元素应该用在像

In react onClick elements should be used in something like

onClick={()=>{

  }}

使用胖箭头符号会为您绑定，您现在可以调用此方法this.function（）

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

这篇关于onClick函数不适用于锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！