JSX Reagieren HTML5 Eingabeschieberegler funktioniert nicht

Question

Ich verwende React.JS für einen Build, und bin ein Bereich Eingabeschieberegler mit zwei Möglichkeiten für eine Komponente erstellen.

dies ist mein Code:

<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/> 

Wenn ich es in meine Client-Seite Rendering-Komponente legen und versuchen, es zu wechseln es überhaupt nicht bewegen. Testen Sie es auf eine JS/PHP-Build Ich gehe weiter, es funktioniert gut.

Warum funktioniert das nicht in JSX/React.JS und was wäre eine vorgeschlagene Arbeit?

Danke!

Answer 1

Benutzerinteraktionen haben keine Auswirkung, da ein <input> mit value Prop als gesteuert gilt. Dies bedeutet, dass der angezeigte Wert vollständig durch die Funktion render gesteuert wird. Um den Eingabewert tatsächlich zu aktualisieren, sollten Sie das Ereignis onChange verwenden. Beispiel:

getInitialState: function() { 
    return {value: 3}; 
}, 
handleChange: function(event) { 
    this.setState({value: event.target.value}); 
}, 
render: function() { 
    return (
    <input 
     id="typeinp" 
     type="range" 
     min="0" max="5" 
     value={this.state.value} 
     onChange={this.handleChange} 
     step="1"/> 
); 
} 

Sie auch dafaultValue statt value verwenden können. In diesem Fall gilt <input> als unkontrolliert und alle Benutzerinteraktionen werden sofort vom Element selbst widergespiegelt, ohne render Funktion Ihrer Komponente aufzurufen.

Mehr dazu im offiziellen documentation

Answer 2

Try this:

onInput() { 
    var input = document.getElementById("typeinp"); 
    var currentVal = input.value; 
    this.setState({ 
     value: currentVal 
    }) 
} 

<input id="typeinp" type="range" min="0" max="5" step="1" defaultValue="3" onInput={this.onInput.bind(this)}/> 

Ich schlage vor, Wert zu ändern = "3" zu default = "3", sonst glaube ich Wert auf "3" fest einprogrammiert und kann schwierig oder unmöglich sein, zu ändern. Die onInput-Funktion sucht den Wert und fügt ihn dem Status hinzu, damit die Daten an eine andere Komponente oder Funktion übergeben werden können. Es gibt wahrscheinlich eine elegantere Lösung für Ihr Problem, aber das obige sollte funktionieren.

Answer 3

denke ich bisherige Antworten Ihr Problem beheben. Ich würde jedoch sagen, dass die Lösung keine React-Zustände beinhalten muss.

Der einzige Grund für Ihren eingefrorenen Eingabeschieberegler ist, dass Sie den Wert auf 3 festgeschrieben haben, wie es @Colin Whitmarsh vorschlägt.

einfach, das funktioniert:

<input id="typeinp" type="range" min="0" max="5" defaultValue="3" step="1"/> 

Nun, werden Sie wahrscheinlich seine Ausgabe müssen etwas tun. Sie können onChange={this.handleChange} als @xCrZx-Status in seiner Antwort verwenden. Aber innerhalb handleChange müssen Sie Ihren Status nicht unbedingt aktualisieren. Abhängig von Ihrer Logik können Sie vermeiden, die Komplexität Ihres Zustands zu erhöhen und Ihre Logik einfach in handleChange zu codieren.

Wenn Sie den Status nicht aktualisieren, werden Sie wahrscheinlich einige Render-Dateien speichern und Ihre Leistung wird sich verbessern.