javascript - chrome 上的 React.js 光标焦点问题

Question

我有一个简单的 react 类，它呈现一个数字类型的受控输入框。

var Form = React.createClass({
  getInitialState: function() {
    return { value: 12.12 };
  },

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

  render: function() {
    return ( 
      <input
        onChange = {(e) => this.handleChange(e)}
        type = "number"
        value = {this.state.value}
      />
    );
  }
});

ReactDOM.render( <Form /> , document.getElementById('container'));

此代码出现在 jsfiddle 中.

要更改值，当我一一删除数字并删除小数点时，焦点突然转移到输入框的开头。

这种情况发生在最新的 Chrome 浏览器 (54.0.2840.87) 上，但不会发生在 Firefox 上。

如果我在 Chrome 上使用 defaultValue 而不是状态中的值，即使我向数字添加十进制值，焦点也会转移到开头。 (添加小数值或删除小数部分都会出现此问题) 请引用这个jsfiddle .

我看到了类似问题的答案here 。但当我尝试删除直到小数点的数字时，问题仍然存在于 Chrome 中。

有办法解决这个问题吗？

预先感谢您的帮助。

Answer 1

我想使用“数字”类型的输入框(用于步进器等)，因此使用 refs 进行了解决。 我从类似问题here的答案中得到了使用引用文献的想法。 .

我不在输入标签中使用defaultValue，而是在componentDidMount中设置初始值。在更改时，我在变量中设置值以供将来使用。

var Form = React.createClass({
  componentDidMount() {
    this.input.value = "123.12";
  },

  handleChange: function(e) {
    this.value = e.target.value;
  },

  render: function() {
    return ( 
      <input
        onChange = {(e) => this.handleChange(e)}
        type = "number"
        ref={(elem) => this.input = elem}
      />
    );
  }
});

ReactDOM.render( <Form /> , document.getElementById('container'));

请查找jsfiddle代码here .