React.js Cursor Fokus Problem auf Chrom

Question

Ich habe eine einfache Reaktionsklasse, die eine kontrollierte Eingabefeld des Typs Nummer macht.

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

Dieser Code ist in dieser jsfiddle enthalten.

Um den Wert zu ändern, wenn ich die Zahlen nacheinander lösche und den Dezimalpunkt lösche, verschiebt sich der Fokus plötzlich zum Anfang des Eingabefeldes.

Dies passiert beim neuesten Chrome-Browser (54.0.2840.87), nicht jedoch bei Firefox.

Wenn ich einen Standardwert anstelle des Werts im Status verwende, wird in Chrome der Fokus zum Anfang verschoben, auch wenn ich der Zahl einen Dezimalwert hinzufüge. (Das Problem tritt sowohl beim Hinzufügen eines Dezimalwerts als auch beim Löschen des Dezimalteils auf.) Bitte beachten Sie jsfiddle.

Ich sah die Antwort auf eine ähnliche Frage here. Aber das Problem bleibt in Chrome bestehen, wenn ich versuche, Zahlen bis zum Dezimalpunkt zu löschen.

Gibt es eine Möglichkeit, dieses Problem zu umgehen?

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Es passiert, weil Ihre type="number". Die e.target.value Variable wird auch den Typ der Nummer haben. Da es keine Zahl gibt, die den Wert 12. hat (passiert beim Löschen der letzten Dezimalzahl nach dem Dezimalpunkt), hat e.target.value einfach den Wert 12, daher springt der Wert von 12.1 zu 12 (beachten Sie, dass zwei Zeichen gleichzeitig gelöscht werden) . Es scheint, dass Chrome diese Änderung nicht mag und sich seltsam verhält.

Die Lösung für dieses Problem besteht darin, einfach Ihren input-Typ in Text zu ändern und Ihr Textfeld beim Senden zu validieren.
Oder entfernen Sie einfach ungültige Zeichen auf Textfeld ändern.

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

Ich wollte ein Eingabefeld vom Typ 'Zahl' (für Stepper, etc.) verwenden, so ein um refs unter Verwendung funktioniert. Ich nahm diese Idee der Verwendung von Referenzen aus einer Antwort auf eine ähnliche Frage here.

Ich verwende defaultValue nicht im Eingabe-Tag, sondern setze den Anfangswert in componentDidMount. Und bei Änderung setze ich Wert in eine Variable für zukünftige Verwendung.

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

Bitte finden jsfiddle Code here.