React 不呈现答案
[英]React don't render answer
问题描述
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.我不知道如何修复，我认为它可以与渲染一起使用，但我在这两个字段上被称为 Answer() function 并且它没有给我结果。 I am trying to link Answer() with the event in render but it did not give success.我试图将 Answer() 与渲染中的事件链接起来，但没有成功。 Thanks a lot.非常感谢。 First 2 scr it's stackoverflow.第 2 个 scr 是 stackoverflow。 I want this result.我想要这个结果。 Edit field, or button and give answer immediately.编辑字段或按钮并立即给出答案。
1 个解决方案
解决方案1
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. this.state 在调用 this.setState() 时未发生变化 - 您可以将渲染的答案作为普通变量计算出来，或者使用 this.Answer(localvalue) 而不是从 this.state 读取之前的 state – Aprillion 30 分钟前 谢谢很多。 I am add const Answer= this.Answer();我添加 const Answer= this.Answer(); in render在渲染中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.