引導導航欄下拉登錄的方式做出反應

我建立一個登錄功能爲引導導航欄，並使用自舉下拉組件。默認情況下，該組件在點擊時關閉。但是，要處理登錄錯誤，組件需要保持打開狀態才能顯示錯誤消息。通過JQuery，可以阻止關閉並顯示所需的錯誤消息。但是這在React中並不正確。引導導航欄下拉登錄的方式做出反應

但什麼是爲此在陣營的正確方法？看來，如果有一個登錄錯誤，我想 1）設置一組狀態變量與正確的錯誤消息 2）調用的setState強制重新渲染 3）在重新渲染，顯示掇向下開放，並與錯誤信息

但我怎麼能顯示下拉上再呈現爲開放？是否有一個財產，將迫使它開始打開？下面是HTML

<li> 
<a id="nav-login" className="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Login</a> 
<div className="useraccount-dropdown-menu dropdown-menu" onClick={this.preventClose} > 
    <p className="title">LOG IN</p> 
     <form action="#" onSubmit={this.login} method="post" acceptCharset="UTF-8"> 
      <label>USER NAME</label> 
      <input className="textfield" ref="username" placeholder="[email protected]" type="text"/> 
      <label>PASSWORD</label> 
      <input className="textfield" ref="password" placeholder="**********" type="password"/> 
      <button className="btn btn-primary btn-nativelogin" type="submit">Sign in</button> 
     </form>         
</div> 
</li>

現在，onSubmit，以下函數將設置錯誤消息並調用setState。這正在改變狀態變量，但引導程序關閉了組件，所以重新渲染不會發生。

login : function(e){ 
e.preventDefault(); 

Meteor.loginWithPassword(this.refs.username.value, this.refs.password.value, (error) => { 
    if(error){ 
    this.setState({errorMsg: error.reason}); 
    }else{ 
    this.setState({isLoggedIn: true}); 
    } 
});

}，

我怎樣才能防止組分關閉？我嘗試添加一個onClick事件監聽器到整個下拉組件，並調用stopPropagation。

preventClose: function(e){ 
e.preventDefault(); 
e.stopPropagation(); 
},

但是這並不妨礙關閉。

來源

2016-03-02 Shouvik

你可以分享你的代碼？ – Chris

只需添加代碼 - 讓我知道你的想法 – Shouvik

您可以處理單擊事件。退房this demo

$('#myDropdown .dropdown-menu').on({ 
    "click":function(e){ 
     e.stopPropagation(); 
    } 
});

我希望這會有所幫助。

來源

2016-03-03 00:08:19

引導導航欄下拉登錄的方式做出反應

回答

相關問題