React don't render answer
Question
Thanks for visiting my question. I am making a simple calculator via react.
<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>
I want to render an answer when I edit the first or second field. But it renders only after the press button or editing field again. I don't see how to fix, I think it can be with render, but I am called an Answer() function on these 2 fields and it does not give me a result. I am trying to link Answer() with the event in render but it did not give success. Thanks a lot. First 2 scr it's stackoverflow. I want this result. Edit field, or button and give answer immediately.
1 answers
solution1
0 2020-04-24 17:19:13
this.state is NOT mutated when calling this.setState() - you can calculate answer from render as a normal variable, or use this.Answer(localvalue) instead of reading the previous state from this.state – Aprillion 30 mins ago Thanks a lot. I am add const Answer= this.Answer(); in render
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.