相关疑难解决方法(0)

我试图理解一些有些"神奇"行为的根本原因,我看到我无法完全解释,而且从阅读ReactJS源代码中看不出来.

setState在响应onChange输入事件时同步调用方法时,一切都按预期工作.输入的"新"值已经存在,因此DOM实际上没有更新.这是非常需要的,因为它意味着光标不会跳转到输入框的末尾.

但是,当运行具有完全相同结构但setState 异步调用的组件时,输入的"新"值似乎不存在,导致ReactJS实际触摸DOM,这导致光标跳转到结束输入.

显然,value在异步情况下,某些东西正在干预将输入"重置"回其先前的情况,而在同步情况下它并没有这样做.这是什么机制？

同步示例

var synchronouslyUpdatingComponent =
    React.createFactory(React.createClass({
      getInitialState: function () {
        return {value: "Hello"};
      },

      changeHandler: function (e) {
        this.setState({value: e.target.value});
      },

      render: function () {
        var valueToSet = this.state.value;

        console.log("Rendering...");
        console.log("Setting value:" + valueToSet);
        if(this.isMounted()) {
            console.log("Current value:" + this.getDOMNode().value);
        }

        return React.DOM.input({value: valueToSet,
                                onChange: this.changeHandler});
    }
}));

请注意,代码将登录render方法,打印出value实际DOM节点的当前值.

在两个Ls"Hello"之间键入"X"时,我们看到以下控制台输出,并且光标保持在预期的位置:

Rendering...
Setting value:HelXlo
Current value:HelXlo

异步示例

var asynchronouslyUpdatingComponent =
  React.createFactory(React.createClass({
    getInitialState: function () {
      return …