React.jsクロムのカーソルフォーカスの問題

Question

私はnumber型の制御された入力ボックスをレンダリングする単純な反応クラスを持っています。

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にあります。

値を変更するには、数値を1つずつ削除して小数点を削除すると、突然入力ボックスの先頭にフォーカスが移動します。

これは最新のChromeブラウザ（54.0.2840.87）では発生しますが、Firefoxでは発生しません。

Chromeでstateの値の代わりにdefaultValueを使用すると、数値に10進数値を追加しても、フォーカスが開始位置に移動します。 （問題は10進値の追加または小数部分の削除の両方で発生します） jsfiddleを参照してください。

私は同様の質問への答えを見たhere。しかし、小数点まで数字を削除しようとすると、Chromeで問題は解決しません。

この問題を回避する方法はありますか？

ご協力いただきありがとうございます。

Answer 1

あなたのtype="number"が原因で発生します。 e.target.value変数にも数字の型があります。値が12.であるため、e.target.valueは単に12の値を持つので、値は12.1から12にジャンプします（2文字は同時に削除されます） 。 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 ( 
 
\t  <input 
 
    \t  onChange = {(e) => this.handleChange(e)} 
 
    \t type = "text" 
 
     \t 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>

Answer 2

私は（などステッパー用）タイプ「数」の入力ボックスを使用していたので、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を見つけてください。