这就是正在发生的事情。

同步

• 你按 X
• input.value 是 'HelXlo'
• 你打电话 setState({value: 'HelXlo'})
• 虚拟 dom 说输入值应该是“HelXlo”
• input.value 是 'HelXlo'
  • 不采取行动

异步

• 你按 X
• input.value 是 'HelXlo'
• 你什么都不做
• 虚拟 DOM 说输入值应该是“你好”
  • react使 input.value '你好'。

稍后的...

• 你 setState({value: 'HelXlo'})
• 虚拟 DOM 表示输入值应该是“HelXlo”
  • react使 input.value 'HelXlo'
  • 浏览器将光标跳转到末尾（这是设置 .value 的副作用）

魔法？

是的，这里有一点魔法。React 在您的事件处理程序之后同步调用渲染。这是避免闪烁所必需的。

使用 defaultValue 而不是 value 为我解决了这个问题。我不确定这是否是最好的解决方案，例如：

从：

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

到：

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

JS Bin 示例

http://jsbin.com/xusefuyucu/edit?js,output

如前所述，当使用受控组件时，这将是一个问题，因为 React 正在更新输入的值，而不是反之（React 拦截更改请求并更新其状态以匹配）。

FakeRainBrigand 的回答很好，但我注意到更新是同步的还是异步的并不完全是导致输入的行为方式。如果您正在同步执行某些操作，例如应用掩码来修改返回值，也可能导致光标跳到行尾。不幸的是（？）这就是 React 在受控输入方面的工作方式。但它可以手动解决。

有一个的这个很好的解释和讨论在reactgithub上的问题，其中包括一个链接到一个JSBin溶液通过柔阿尔珀特[即手动确保光标保持在那里它应该是]

这是使用这样的<Input>组件实现的：

var Input = React.createClass({
  render: function() {
    return <input ref="root" {...this.props} value={undefined} />;
  },
  componentDidUpdate: function(prevProps) {
    var node = React.findDOMNode(this);
    var oldLength = node.value.length;
    var oldIdx = node.selectionStart;
    node.value = this.props.value;
    var newIdx = Math.max(0, node.value.length - oldLength + oldIdx);
    node.selectionStart = node.selectionEnd = newIdx;
  },
});

这不完全是一个答案，而是一种缓解问题的可能方法。它为 React 输入定义了一个包装器，通过本地状态垫片同步管理值更新；并版本化传出值，以便只应用从异步处理返回的最新值。

它基于 Stephen Sugden ( https://github.com/grncdr ) 的一些工作，我针对现代 React 进行了更新，并通过对值进行版本控制进行了改进，从而消除了竞争条件。

不漂亮:)

http://jsfiddle.net/yrmmbjm1/1/

var AsyncInput = asyncInput('input');

以下是组件需要如何使用它：

var AI = asyncInput('input');

var Test = React.createClass({
    // the controlling component must track
    // the version
    change: function(e, i) {
      var v = e.target.value;
      setTimeout(function() {
        this.setState({v: v, i: i});
      }.bind(this), Math.floor(Math.random() * 100 + 50));
    },
    getInitialState: function() { return {v: ''}; },
    render: function() {
      {/* and pass it down to the controlled input, yuck */}
      return <AI value={this.state.v} i={this.state.i} onChange={this.change} />
    }
});
React.render(<Test />, document.body);

另一个试图减少对控制组件代码的影响的版本在这里：

http://jsfiddle.net/yrmmbjm1/4/

最终看起来像：

var AI = asyncInput('input');

var Test = React.createClass({
    // the controlling component must send versionedValues
    // back down to the input
    change: function(e) {
      var v = e.target.value;
      var f = e.valueFactory;
      setTimeout(function() {
        this.setState({v: f(v)});
      }.bind(this), Math.floor(Math.random() * 100 + 50));
    },
    getInitialState: function() { return {v: ''}; },
    render: function() {
      {/* and pass it down to the controlled input, yuck */}
      return <AI value={this.state.v} onChange={this.change} />
    }
});
React.render(<Test />, document.body);

¯\_(ツ)_/¯

我在使用 Reflux 时遇到了同样的问题。状态存储在 React 组件之外，这与包装setState在setTimeout.

@dule 建议，我们应该同时使我们的状态更改同步和异步。所以我准备了一个 HOC 来确保值变化是同步的——所以包装受异步状态变化影响的输入是很酷的。

注意：这个 HOC 仅适用于具有类似于<input/>API 的组件，但我想如果有这样的需要，让它更通用是很简单的。

import React from 'react';
import debounce from 'debounce';

/**
 * The HOC solves a problem with cursor being moved to the end of input while typing.
 * This happens in case of controlled component, when setState part is executed asynchronously.
 * @param {string|React.Component} Component
 * @returns {SynchronousValueChanger}
 */
const synchronousValueChangerHOC = function(Component) {
    class SynchronousValueChanger extends React.Component {

        static propTypes = {
            onChange: React.PropTypes.func,
            value: React.PropTypes.string
        };

        constructor(props) {
            super(props);
            this.state = {
                value: props.value
            };
        }

        propagateOnChange = debounce(e => {
            this.props.onChange(e);
        }, onChangePropagationDelay);

        onChange = (e) => {
            this.setState({value: e.target.value});
            e.persist();
            this.propagateOnChange(e);
        };

        componentWillReceiveProps(nextProps) {
            if (nextProps.value !== this.state.value) {
                this.setState({value: nextProps.value});
            }
        }

        render() {
            return <Component {...this.props} value={this.state.value} onChange={this.onChange}/>;
        }
    }

    return SynchronousValueChanger;
};

export default synchronousValueChangerHOC;

const onChangePropagationDelay = 250;

然后它可以以这样的方式使用：

const InputWithSynchronousValueChange = synchronousValueChangerHOC('input');

通过使它成为 HOC，我们可以让它为输入、文本区域工作，也可能为其他人工作。也许这个名字不是最好的，所以如果你们中的任何人有如何改进的建议，请告诉我:)

有一个去抖动的黑客，因为有时，当打字真的很快完成时，错误会再次出现。