verwenden von innerHTML mit Reagieren

Habe ich eine mini-Rechner mit React.

Funktioniert es, aber ich bin mir nicht sicher, ob ich verstehe, warum. Könnte mir jemand zeigen gegenüber dem Konzept, dass ich nicht voll greifen hier.

Mein code ist unten.

Hier ist, was ich erwartet hatte:
Nach der ersten operation (erste mal das getResult Funktion ausgeführt wird) erwartet, dass ich zu schreiben, ein bedingtes, in der clearingState Funktion zum zurücksetzen der innerHTML von <div id="display" zu {this.state.string} als getResult Funktion, wird es auf die updateResult variable. Doch, es funktioniert, ohne dass ich mit dieser Einstellung. Ich verstehe nicht, warum.

Vielen Dank im Voraus..

<script type="text/babel">
  var Calculator = React.createClass({
      createString: function(event){
        var previousState = this.state.string;
        var target = event.target;
        var number = target.innerHTML;
        var newState = previousState+number;
        this.setState({string: newState});
      },
      clearingState: function(event){
        var newState = "";
        this.setState({string: newState});
      },
      getResult: function(){
        var stringResult = this.state.string;
        var updateResult = eval(stringResult);
        return document.getElementById("display").innerHTML = updateResult;
      },
      getInitialState: function(){
        return ({
          string: ""
        })
      },
      render: function(){
          return (
              <div>
                <div id ="display">{this.state.string}</div>
                <div id="main">
                    <div className="key zero" onClick={this.createString}>0</div>
                    <div className="key one" onClick={this.createString}>1</div>
                    <div className="key two" onClick={this.createString}>2</div>          
                    <div className="key three" onClick={this.createString}>3</div>
                    <div className="key four" onClick={this.createString}>4</div>
                    <div className="key five" onClick={this.createString}>5</div>
                    <div className="key six" onClick={this.createString}>6</div>
                    <div className="key seven" onClick={this.createString}>7</div>
                    <div className="key eight" onClick={this.createString}>8</div>
                    <div className="key nine" onClick={this.createString}>9</div>
                    <div className="key d" onClick={this.createString}>.</div>
                    <div className="key C" onClick={this.clearingState}>C</div>
                </div>
                <div id="operators">
                    <div className="key mp" onClick={this.createString}>*</div>
                    <div className="key dv" onClick={this.createString}>/</div>
                    <div className="key ad" onClick={this.createString}>+</div>
                    <div className="key sb" onClick={this.createString}>-</div>
                    <div className="key eq" onClick={this.getResult}>=</div>
                </div>
              </div>
          );
      }
  });

  ReactDOM.render(
    <Calculator/>,
    document.getElementById('calculator')
  )

Jedes mal, wenn Sie rufen setState Reagieren automatisch Anrufe render wieder (mit dem neuen Zustand). Aus Neugier, sind Sie mit dem Reagieren offiziellen docs als guide???
Man sollte nie die Notwendigkeit, manuell zu aktualisieren innerHTML in einer Anwendung Reagieren. Sie sollten nur anrufen setState lassen und Reagieren, Griff die Aktualisierung der DOM für Sie.
danke für Ihre Erklärung. Ersetzt habe ich diese: return document.getElementById("display").innerHTML = updateResult; mit diesem statt: this.setState({string: updateResult}); Und du hast Recht über die setState-und rendering. Ich verstehe immer noch nicht, obwohl, warum das Vorherige code funktionierte.. so wie es geschrieben wurde, bevor ich wirklich dachte, ich sei ein überschreiben der {dies.Zustand.string} mit meinem updateResult variable. Sorry, ich bin zu langsam Sie zu fangen, bis auf diese... Und ja, ich lese die docs, wenn auch nicht immer verstehen 🙂

InformationsquelleAutor Vera | 2015-12-29

  1. 1

    Jedes mal, wenn Sie den Zustand ändern reagieren ruft die render-Funktion wieder, was bedeutet, dass, wenn Sie schrieb:

    <div id ="display">{this.state.string}</div>

    beim Aufruf clearingState-Funktion reagieren, erkennen Sie verändert den Zustand und machen wieder Ihre Komponente, und die Anweisung wird {dies.Zustand.string} wird ersetzt, für die neue state-Wert.

    So, was passiert ist: ändern Sie den Status jedes mal, wenn Sie rufen Sie die createString Funktion und reagieren dann ruft die render-Funktion wieder zu reflektieren, der neue Staat; der Benutzer dann drücken Sie die " = " - operator und die getResult-Funktion aufgerufen wird, und manuell ändern Sie die Inhalte Ihrer display-div -; wenn der Benutzer drücken Sie die "C" - Taste, der Staat ist wieder aktualisiert und reagieren Anrufe Rendern Sie erneut entsprechend den neuen Staat.

    Andere Sache, ist, dass Sie sollten nicht ändern Sie die innerHTML-Eigenschaft der div-manuell. Lassen Sie stattdessen reagieren Pflege, die den Zustand der Komponente. Also, sollten Sie dies tun.setState({string: updatedResult}) und sich keine sorgen über innerHTML.

    Danke. Ich glaube, ich war nicht immer, weil ich dachte, dass ich das ändern, was in der render-Funktion mit meinem Aufruf von getResult, das ist eine dumme Gedanke jetzt, dass ich denke, dass es mehr. Vielen Dank an Euch beide @azium 🙂

    InformationsquelleAutor Felipe T.

Schreibe einen Kommentar