chrome上的React.js光标焦点问题答案

【问题标题】：React.js cursor focus issue on chromechrome上的React.js光标焦点问题
【发布时间】：2016-11-03 07:53:35
【问题描述】：

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

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 而不是 state 中的值，即使我在数字上添加了十进制值，焦点也会转移到开头。（问题发生在添加小数或删除小数部分）请参考这个jsfiddle。

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

有没有办法解决这个问题？

提前感谢您的帮助。

【问题讨论】：

标签： javascript google-chrome reactjs

【解决方案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。

【讨论】：

【解决方案2】：

这是因为您的type="number"。 e.target.value 变量也将具有数字类型。由于没有数值为12. 的数字（当您删除小数点后的最后一个小数时发生），那么e.target.value 将简单地具有12 的值，所以值从12.1 跳转到12（注意同时删除了两个字符）。 Chrome 似乎不喜欢这种变化并且表现得很奇怪。

此问题的解决方案是将您的 input 类型更改为文本，并在提交时验证您的文本框。
或者只是在文本框更改时去除无效字符。

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

  handleChange: function(e) {
    this.setState({ 
        value: e.target.value.replace(/([^0-9\.])/g, '')
    });
  },

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【讨论】：