2017-01-05 2 views
1

Я новичок в реагировании js, я немного смущен, что как остановить запуск простой кнопки при запуске, когда пользователь нажимает кнопку Enter ... Извините, мой код будет неудобным ...... Если неудобно читать Feel свободно закоментируйтеКак остановить кнопку запуска Когда пользователь нажимает кнопку Enter Button React js?

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) 

ответ

1

Наконец я получил решение Просто добавило KeyDown и OnClick ЭВТА и бросили некоторые, если другое заявление для клавишных событий ..

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

     } 
Смежные вопросы