Question

我是新手反应js，我很困惑，当用户点击Enter按钮时如何停止触发简单按钮触发... 对不起，我的代码会很尴尬......如果感觉不舒服请随意发表评论

import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import * as headerAction from '../../Actions/headerActions';
import * as notificationActions from '../../Actions/notificationActions';

import * as tagProfileActions from '../../Actions/tagProfileActions';

class TagProfile extends React.Component{
    static contextTypes = {
        router:React.PropTypes.object
    };
    constructor(props){
        super(props)
        this.state = {
            data:[],
            tagName:"",
            In:null,
            tagId:"",
            tagFollowers:0,
            isFollowStatus:""

        }
        this.handleFollow =this.handleFollow.bind(this)
    }

    handleFollow(e){
       //How to Prevent this 
        console.log(e.keyCode)//Udefined
        e.preventDefault();
          console.log('Clicked')

    }

    render(){
       console.log(this.state)
        return (
            <div className="ContainerForTagProfile">
                <div className="TagProfileTopSecTion">
                    <h1>Topic: {this.state.tagName} </h1>
                </div>
                <div className="StatusBarRealTimeViewsAndFollowButtn">
                    <div className="ViewCcountBar">
                        <p>30,18,5222    </p>
                    </div>
                    <div className="FollowButtonForTagPRofile">
                        <button type="button"  onClick={(e)=>this.handleFollow(e)}>{this.state.tagFollowers} | {this.state.isFollowStatus}</button>
                    </div>
                </div>
                <div className="GallerySectionForTagforfile">


                    {this.state.data.map(data => {

                        return (
                            <Link key={data.id} href="#" target="_blank" to={'/'+data.postId}><div  className="SingleImagePost">
                                <img src={data.thumNailUrl} />
                                <div className="LiveViewCountBar">
                                    <p>{data.views}   - {data.whoLikedIt.length} ❤</p>
                                </div>
                                <div className="LikesBar">
                                    <div className="MakeItCenter">
                                        <div className="ProfileTinyImage">
                                            <img src={data.postOwnerPic} />
                                        </div>
                                        <div className="ProfilePosTOwnerName">
                                            <p>{data.postOwnerFullName}</p>
                                        </div>

                                    </div>
                                </div>
                            </div></Link>
                        )
                    })}


                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        isLoggedIn:state.logInStatus
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        getTagProfileData:(slug) => dispatch(tagProfileActions.getTagDetails(slug)),
        getTagFollowInfo:slug => dispatch(tagProfileActions.getTagFollowInfo(slug)),
        toogleSignInOut:bool => dispatch(headerAction.toggleSignPop(bool)),
        popErrorNotification:(bool,color,message) => dispatch(notificationActions.popUpNotification(bool,color,message)),
        tagProfileFollow:(data) => dispatch(tagProfileActions.tagProfileFollow(data))

    }
};

export default connect(mapStateToProps,mapDispatchToProps)(TagProfile)

Answer 1

最后我得到了解决方案刚刚添加了KeyDown和Onclick Evt并为KeyBoard事件抛出了一些if else语句..

 handleFollow(e){
            e.preventDefault()
            if(e.type !== 'keydown'){
                //Start Code From here
               }

        }

如何停止触发按钮当用户单击Enter按钮时React js？

1 个答案: