JSX Reagieren HTML5 Input-Regler Funktioniert nicht

Ich bin mit React.JS für einen build, und bin Gebäude eine Reihe input-regler mit zwei Entscheidungen, die für eine Komponente.

dies ist mein code:

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

Wenn ich ihn in meine client-side rendering-Komponente, und versuchen Sie wechseln es nicht zu bewegen. Testen Sie es auf eine JS/PHP bauen, ich habe zu gehen auf, es funktioniert gut.

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

Dank!

  • Und was hat das client-side-rendering-Komponente Aussehen ?
InformationsquelleAutor CodeFromthe510 | 2016-03-21
  1. 34

    Benutzer-Interaktionen haben keine Wirkung, da ein <input> mit value prop ist als gesteuert. Es bedeutet, dass der angezeigte Wert wird kontrolliert, vollständig von render Funktion. Eigentlich auch So zu aktualisieren, Eingabe Wert, den Sie verwenden sollten, die onChange Veranstaltung. 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"/>
  );
}

    Können Sie auch defaultValue statt value. In diesem Fall <input> als unkontrollierte und alle user-Interaktionen werden sofort durch element selbst, ohne Berufung auf render Funktion der Komponente.

    Mehr dazu in der offiziellen Dokumentation

    • Vielen Dank für die informative Antwort. Ich landete mit Konstruktor (ES6-syntax) und verwendet einen Standardwert, dies zu verwirklichen. Danke für den link zu den offiziellen docs wie auch.
    • [!] Sollten Sie initialisieren Staat im Konstruktor bei der Verwendung von ES6-Klassen, und definieren Sie die getInitialState - Methode bei der Verwendung Reagieren.createClass.
    InformationsquelleAutor xCrZx
  2. 3

    Ich denke, dass die vorherigen Antworten dein problem lösen. Ich würde jedoch sagen, dass die Lösung nicht beteiligt werden müssen, Reagieren die Staaten.

    Ist der einzige Grund hinter Ihrem gefrorenen input-regler ist, dass Sie die hardcoded dessen Wert auf 3, da @Colin Whitmarsh schlägt.

    Einfach funktioniert dies:

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

    Nun, Sie müssen wahrscheinlich Ihren Ausgang, um etwas zu tun. Sie können onChange={this.handleChange} wie @xCrZx Staaten in seiner Antwort. Aber im inneren handleChange Sie nicht unbedingt haben, aktualisieren Sie Ihren Status. Je nach deiner Logik könnte man vermeiden, die Erhöhung der Komplexität Ihres Staates und einfach code Ihrer Logik innerhalb handleChange.

    Wenn Sie vermeiden Sie die Aktualisierung der Staat, werden Sie wahrscheinlich sparen Sie einige macht und Ihre Leistung zu verbessern.

    InformationsquelleAutor Daniel Reina
  3. 2

    Versuchen Sie dies:

    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)}/>

    Schlage ich vor, changing value="3" defaultValue="3", sonst finde ich den Wert fest auf "3" und kann schwierig oder unmöglich zu ändern. Das onInput-Funktion feststellt, dass der Wert und fügt es dem Staat so die Daten übergeben werden können, zu einer anderen Komponente oder Funktion. Es gibt wahrscheinlich eine elegantere Lösung für dein problem, aber die oben sollte funktionieren.

    • Danke! Die defaultvalue-und Stand-Funktion hat den trick. Obwohl ich am Ende einen Konstruktor erstellen und zuweisen eines default-Wert, es so gut
    InformationsquelleAutor Colin Whitmarsh
  4. 1

    Hier eine Lösung in form von mehreren Schiebereglern oder sogar einen einzigen Schieberegler, mit dem event-handler übergeben
    wir können einfach mit HTML-Eingabe Typ Auswahl
    rc-regler und reagieren-input-range nicht gesendet event-handler onChange oder onAfterChange Sie sendet den Wert des Reglers Implizit, so können wir nicht umgehen form von Schiebereglern oder erstellen Sie on-the-fly.

    jsfiddle-snippet

    Weitere können wir überprüfen, HTML-Eingabebereich und CSS zur Verfügung gestellt von CSS-Tricks

    JS:

    class SlidersExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slidersLabels: ["A", "B", "C", "D"],
      sumOfCustomWeights: 0,
      slidersWeights: []
    };
  }
  componentDidMount() {
    const slidersLabels = this.state.slidersLabels;
    const slidersWeights = [];
    for (var i = 0; i < slidersLabels.length; ++i)
      slidersWeights[slidersLabels[i]] = 0;
    this.setState({ slidersWeights });
  }

  render() {
    return (
      <div>
        {this.generateSliders()}
        <span> Total Weights: {this.state.sumOfCustomWeights} </span>
      </div>
    );
  }
  generateSliders() {
    const slidersLabels = this.state.slidersLabels;
    var sliders = [];
    for (var i = 0; i < slidersLabels.length; ++i) {
      sliders.push(
        <div style={{ marginTop: "20px", marginBottom: "20px" }}>
          <span style={{ fontSize: "16px", marginBottom: "6px" }}>
            {" "}
            {slidersLabels[i]} ({this.state.slidersWeights[slidersLabels[i]]})%
          </span>
          <input
            id={slidersLabels[i]}
            type="range"
            defaultValue="0"
            min="0"
            max="100"
            className="slider"
            onChange={this.handleSliderChange.bind(this)}
            step="1"
          />
        </div>
      );
    }
     return sliders;
  }
  handleSliderChange(event) {
    //console.log(event.target.value, " ", event.target.id);
    var id = event.target.id;
    var value = event.target.value;
    const slidersWeights = this.state.slidersWeights;
    slidersWeights[id] = parseInt(value);
    var sumOfCustomWeights = 0;
    const slidersLabels = this.state.slidersLabels;
    for (var i = 0; i < slidersLabels.length; i++)
      sumOfCustomWeights += slidersWeights[slidersLabels[i]];
    this.setState({ slidersWeights, sumOfCustomWeights });
  }
}

ReactDOM.render(<SlidersExample />, document.querySelector("#app"));

    CSS:

    input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

#app{
  margin-right: 100px;
  margin-left: 100px;
  margin-bottom: 100px;
  }

    HTML:

    <!DOCTYPE html>
<html>
<body>


<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="app"> </div>
</body>
</html>

    Diese Lösung funktioniert perfekt bei mir 😉

    Mit CodeSandbox

    InformationsquelleAutor Abdallah Okasha
Schreibe einen Kommentar