Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

此代码存在于此jsfiddle。

中

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

这种情况发生在最新的Chrome浏览器（54.0.2840.87）上，而不是在Firefox上。

如果我在Chrome上使用defaultValue而不是state in value，即使我在数字中添加了小数值，焦点也会转移到开头。（在添加小数值或删除小数部分时都会出现问题）请参阅此jsfiddle。

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

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

提前感谢您的帮助。

Answer 1

我想使用类型为＆＃39;数字＆＃39;的输入框。（对于步进器等），使用refs进行了解决方法。我从类似问题here的答案中使用了refs这个想法。

我不在输入标记中使用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。

Answer 2

这是因为您的type="number"。 e.target.value变量也会有数字类型。由于没有值为12.的数字（当您删除小数点后的最后一个十进制数时会发生），因此e.target.value的值只有12，因此值从{{ 1}}到12.1（请注意，同时删除了两个字符）。 Chrome似乎并不喜欢这种变化并且表现得很奇怪。

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

＆＃13;

input

＆＃13;

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

＆＃13;

React.js游标焦点问题在chrome上

2 个答案: