如何从商店访问控件内的 HTML 元素？

Question

我正在用 ReactJS + Flux 模式制作一个登录页面，我已经做到了，但我很想知道是否有更好的方法来做到这一点。

我的实现看起来像这样：

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;

在那之后，我刚刚创建的对象像有效负载一样（未更改）到 Actions -> Dispatcher -> Store。

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;

因此，由于事实（如果我错了请纠正我）我可以直接访问错误 div（或任何其他 react-components HTML 元素）仅从定义组件的 jsx 文件内部，我制作了 handleError 函数，它与有效负载一起传输到商店本身，如果错误被发回，可以调用它来自服务器。

此实现有效，但我正在寻找更优雅的方法（如果有的话）。

非常感谢您的任何建议。

Answer 1

React 的主要思想是你 而不是 直接操作 DOM。（有一些例外，例如添加/删除侦听器）。

您的反应方式是将错误消息放入状态，如果收到错误消息则更新状态。

并且不要让商店直接调用元素内部的函数：组件应该真正是自包含的，响应 props 和用户输入。相反，在您的组件中放置一个侦听器，如果您的商店发生变化，它会获取新数据。

像这样：

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

如何从商店访问控件内的 HTML 元素？

How to access a HTML element inside a control from the store?

html

javascript

ajax

reactjs-flux