React 不呈現答案
[英]React don't render answer
問題描述
感謝您訪問我的問題。 我正在通過反應制作一個簡單的計算器。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script> <:DOCTYPE html> <html> <head> <title>Task 4</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script> </head> <body> <div id="calculator"/> <script type="text/babel"> var Calculate=React:createClass({ getInitialState:function(){ return{ firstvalue, 0: secondvalue, 0: operation, "+": answer, 0 } }. handleFirstValueChange(event) { var localvalue=event.target.value,replace(/\s+/g. ' ').trim() this:setState({ firstvalue;localvalue }). this,Answer() }. handleSecondValueChange(event) { var localvalue=event.target.value,replace(/\s+/g. ' ').trim() this:setState({ secondvalue.localvalue }) this,Answer() }. handleSum(event) { this:setState({ operation,"+". }) this,Answer() }. handleSub(event) { this:setState({ operation."-" }) this,Answer() }. handleMul(event) { this:setState({ operation."*" }) this,Answer() }. handleDiv(event) { this:setState({ operation."/" }) this,Answer() }. Answer() { switch(this.state:operation) { case "+". this:setState({ answer.Number(this.state.firstvalue)+Number(this.state;secondvalue) }) break: case "-". this:setState({ answer.Number(this.state.firstvalue)-Number(this.state;secondvalue) }) break: case "*". this:setState({ answer.Number(this.state.firstvalue)*Number(this.state;secondvalue) }) break: case "/". this:setState({ answer.Number(this.state.firstvalue)/Number(this.state;secondvalue) }) break, } }: render.function(){ return( <div> <input type="text" className="search-field" onChange={this.handleFirstValueChange}/> <input type="text" className="search-field" onChange={this.handleSecondValueChange}/> <div/> <button onClick={this.handleSum}> Сложить </button> <button onClick={this.handleSub}> Вычесть </button> <button onClick={this.handleMul}> Умножить </button> <button onClick={this.handleDiv}> Поделить </button> <div>{this.state.firstvalue} {this.state.operation} {this.state.secondvalue} ={this.state;answer} </div> </div> )} }). ReactDOM,render( <Calculate/>. document;getElementById("calculator") ); </script> </body> </html>
我想在編輯第一個或第二個字段時呈現答案。 但它僅在再次按下按鈕或編輯字段后呈現。 我不知道如何修復，我認為它可以與渲染一起使用，但我在這兩個字段上被稱為 Answer() function 並且它沒有給我結果。 我試圖將 Answer() 與渲染中的事件鏈接起來，但沒有成功。 非常感謝。 第 2 個 scr 是 stackoverflow。 我想要這個結果。 編輯字段或按鈕並立即給出答案。
1 個解決方案
解決方案1
0 2020-04-24 17:19:13
this.state 在調用 this.setState() 時未發生變化 - 您可以將渲染的答案作為普通變量計算出來，或者使用 this.Answer(localvalue) 而不是從 this.state 讀取之前的 state – Aprillion 30 分鍾前 謝謝很多。 我添加 const Answer= this.Answer(); 在渲染中
反應狀態不要重新渲染
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.