如何從商店訪問控件中的HTML元素？

我正在製作一個帶有ReactJS + Flux模式的登錄頁面，並且已經制作完成，但是如果有更好的方法來完成它，我很感興趣。如何從商店訪問控件中的HTML元素？

我的實現看起來是這樣的：

LoginForm.jsx：

//imports..... 
var LoginForm = React.createClass({ 
    handleSubmit : function(e){ 
     //take username, password and rememberMe values from the form.... 
     var error = this.refs.ErrorMsg.getDOMNode(); 

     error.innerHTML = ""; //reset the error output for every submit 

     //if any field is left empty... 
     else{ //make an object and forward it to actions.... 
      LoginActions.login({ 
       //set username, password and rememberMe fields... 
       ErrorCallback : this.handleError 
      }); 
     } 
    }, 

    handleError : function(errorMsg){ 
     //function that displays the error msg inside the error div 
     this.refs.ErrorMsg.getDOMNode().innerHTML = errorMsg; 
    }, 

    render : function() { 
     return(
      //HTML for the form, and: 
      <div ref="ErrorMsg"></div> 
     ) 
    } 
}); 
module.exports = LoginForm;

在那之後，我剛剛創建的對象去（不變），如有效載荷操作 - >調度 - >商店。

LoginStore.js：

//imports.... 
var LoginStore = assign({}, ApplicationStore, { 
    login : function(payload){ 
     //this is the method which is called by the Dispatcher 

     /* 
      take username, password and rememberMe from payload and create a 
      new object for AJAX call.... 
     */ 

     var successCallback = function(data, statusText, xhr){ 
      LoginStore.emit(AppConstants.LOGIN); //there is a LOGIN constant... 
      /* 
       inside data that I get back from ajax call, 
       there is a Error field which contains the 
       "Wrong username or password" message coming from the server 
       after validation if it failed, or if the credentials are 
       fine, it contains an empty string.... 
      */ 
      payload.errorCallback(null, data.Error); 
     } 

     AJAXCall(url, loginInfo, successCallback, payload.errorCallback); 
    }, 

    //dispacher registering.... 
}); 
module.exports = LoginStore;

所以，由於（糾正我，如果我錯了），我可以直接訪問錯誤股利（或任何其他反應成分HTML元素）只能從定義組件的jsx文件中獲取，我創建了handleError函數，該函數將有效載荷傳遞到存儲本身，在從服務器發回錯誤的情況下可以調用該函數。

此實現工作，但我正在尋找一個更優雅的方式來做到這一點（如果有的話）。

非常感謝您的任何建議。

來源

2015-11-06 Milos Maric

反應的主要思想是你做而不是直接操縱DOM。（有些例外，例如添加/刪除偵聽器）。

您的反應方式是將錯誤消息置於狀態，並在出現錯誤消息時更新狀態。

而沒有商店直接調用元素內的一個函數：組件應該是真正的自包含，響應道具和用戶輸入。相反，在您的組件中放置一個偵聽器，如果您的存儲已更改，則會獲取新數據。

事情是這樣的：

var LoginForm = React.createClass({ 
    getInitialState() { 
    return { errorMsg : "" };    // start with empty error message 
    }, 

    componentDidMount() { 
    // add listener to store here 
    LoginStore.addChangeListener(this._onChangeStore); 
    } 

    handleSubmit : function(e){ 
    //take username, password and rememberMe values from the form.... 
    // No need to empty errorMsg here, we do that when we re-render the form 

    //if any field is left empty... 
    else{ //make an object and forward it to actions.... 
     LoginActions.login({ 
     //set username, password and rememberMe fields... 
     //no callback here 
     }); 
    } 
    }, 

    _onChangeStore : function(){ 
    // ... go get the error message (if any) from your store 
    this.setState({ errorMsg : errorMsgFromStore }); 
    }, 

    render : function() { 
    return(
     //HTML for the form, and: 
     <div ref="ErrorMsg">{this.state.errorMsg}</div> 
    ) 
    } 
});

把回調處理程序上的AJAX店內。將錯誤消息保存在那裏併發出更改。例如：

var errorCallback = function(data, statusText, xhr){ 
    this.errorMsg = data.error; // save the errorMsg in your store 
    LoginStore.emit(AppConstants.ERROR); 
} 

AJAXCall(url, loginInfo, successCallback, errorCallBack);

來源

2015-11-06 10:45:54 wintvelt

非常感謝。 –

如何從商店訪問控件中的HTML元素？

回答

相關問題