我是 React 的初學者，我正在嘗試用它制作小應用程式。事實上，這是我在 React 中制作的第一個應用程式，但我遇到了一個問題。
我正在制作一個小型應用程式，可以輸入數字并對其進行加、減或乘運算，即計算器。這是代碼。
const { Component } = React;
class App extends React.Component {
state = {
num1: 0,
num2: 0,
answer: 0,
equation: "",
};
handleAdd1 = (number) => {
this.setState({ num1: number });
};
handleAdd2 = (number2) => {
this.setState({ num2: number2 });
};
handleClear = () => {
this.setState({ num1: 0, num2: 0, answer: 0 });
};
handlePlus = (sign) => {
switch (sign) {
case " ":
this.setState({ answer: this.state.num1 this.state.num2 });
break;
case "-":
this.setState({ answer: this.state.num1 - this.state.num2 });
break;
case "x":
this.setState({ answer: this.state.num1 * this.state.num2 });
break;
}
};
handleInput = (event) => {
this.setState({ equation: event.target.value });
};
render() {
return (
<div>
<div>
<h1>{this.state.num1}</h1>
<button onClick={() => this.handleAdd1(1)}> 1 </button>
<button onClick={() => this.handleAdd1(2)}> 2 </button>
<button onClick={() => this.handleAdd1(3)}> 3 </button>
<button onClick={() => this.handleAdd1(4)}> 4 </button>
<button onClick={() => this.handleAdd1(5)}> 5 </button>
<button onClick={() => this.handleAdd1(6)}> 6 </button>
<button onClick={() => this.handleAdd1(7)}> 7 </button>
<button onClick={() => this.handleAdd1(8)}> 8 </button>
<button onClick={() => this.handleAdd1(9)}> 9 </button>
<button onClick={() => this.handleAdd1(0)}> 0 </button>
</div>
<div>
<h1>{this.state.num2}</h1>
<button onClick={() => this.handleAdd2(1)}> 1 </button>
<button onClick={() => this.handleAdd2(2)}> 2 </button>
<button onClick={() => this.handleAdd2(3)}> 3 </button>
<button onClick={() => this.handleAdd2(4)}> 4 </button>
<button onClick={() => this.handleAdd2(5)}> 5 </button>
<button onClick={() => this.handleAdd2(6)}> 6 </button>
<button onClick={() => this.handleAdd2(7)}> 7 </button>
<button onClick={() => this.handleAdd2(8)}> 8 </button>
<button onClick={() => this.handleAdd2(9)}> 9 </button>
<button onClick={() => this.handleAdd2(0)}> 0 </button>
</div>
<div>
<button onClick={() => this.handlePlus(" ")}> </button>
<button onClick={() => this.handlePlus("-")}>-</button>
<button onClick={() => this.handlePlus("x")}>x</button>
</div>
<div>
<button onClick={this.handleClear}>Clear</button>
<h1>{this.state.answer}</h1>
<input type="text"></input>
<button onClick={() => this.handleInput}>Enter !</button>
<button onClick={() => console.log(this.state.equation)}>
Log in console
</button>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>如果你查看程式，你會看到有幾個數字，如果你點擊它們并添加，你會得到一個 h1 的結果。但是，這并不是很好，因為您只能添加個位數。因此，如您所見，我添加了一個輸入，它將獲取等式并將其記錄在控制臺中（暫時）。但遺憾的是，這是回傳未定義。我能做些什么來解決這個問題嗎？
uj5u.com熱心網友回復：
您需要使輸入成為受控組件。您可以通過監聽onChange事件并將值傳遞給 value 屬性來制作輸入控制組件
<input type="text" value={this.state.equation} onChange={(e)=>this.setState({equation: e.target.value})}
現在你將得到方程
uj5u.com熱心網友回復：
您忘記映射輸入標簽的值，您可以將其與狀態系結，如果您是新手，您應該開始使用鉤子，
這是現在更清晰的方法，這是完整的作業解決方案，
https://codesandbox.io/embed/ inspiring-tesla-9sjop?fontsize=14&hidenavigation=1&theme=dark
import React, { Component } from "react";
class App extends React.Component {
state = {
num1: 0,
num2: 0,
answer: 0,
equation: "",
value: ""
};
handleChange = (e) => {
this.setState({ equation: e.target.value });
};
handleAdd1 = (number) => {
this.setState({ num1: number });
};
handleAdd2 = (number2) => {
this.setState({ num2: number2 });
};
handleClear = () => {
this.setState({ num1: 0, num2: 0, answer: 0 });
};
handlePlus = (sign) => {
switch (sign) {
case " ":
this.setState({ answer: this.state.num1 this.state.num2 });
break;
case "-":
this.setState({ answer: this.state.num1 - this.state.num2 });
break;
case "x":
this.setState({ answer: this.state.num1 * this.state.num2 });
break;
}
};
handleInput = (event) => {
this.setState({ equation: event.target.value });
};
render() {
return (
<div>
<div>
<h1>{this.state.num1}</h1>
<button onClick={() => this.handleAdd1(1)}> 1 </button>
<button onClick={() => this.handleAdd1(2)}> 2 </button>
<button onClick={() => this.handleAdd1(3)}> 3 </button>
<button onClick={() => this.handleAdd1(4)}> 4 </button>
<button onClick={() => this.handleAdd1(5)}> 5 </button>
<button onClick={() => this.handleAdd1(6)}> 6 </button>
<button onClick={() => this.handleAdd1(7)}> 7 </button>
<button onClick={() => this.handleAdd1(8)}> 8 </button>
<button onClick={() => this.handleAdd1(9)}> 9 </button>
<button onClick={() => this.handleAdd1(0)}> 0 </button>
</div>
<div>
<h1>{this.state.num2}</h1>
<button onClick={() => this.handleAdd2(1)}> 1 </button>
<button onClick={() => this.handleAdd2(2)}> 2 </button>
<button onClick={() => this.handleAdd2(3)}> 3 </button>
<button onClick={() => this.handleAdd2(4)}> 4 </button>
<button onClick={() => this.handleAdd2(5)}> 5 </button>
<button onClick={() => this.handleAdd2(6)}> 6 </button>
<button onClick={() => this.handleAdd2(7)}> 7 </button>
<button onClick={() => this.handleAdd2(8)}> 8 </button>
<button onClick={() => this.handleAdd2(9)}> 9 </button>
<button onClick={() => this.handleAdd2(0)}> 0 </button>
</div>
<div>
<button onClick={() => this.handlePlus(" ")}> </button>
<button onClick={() => this.handlePlus("-")}>-</button>
<button onClick={() => this.handlePlus("x")}>x</button>
</div>
<div>
<button onClick={this.handleClear}>Clear</button>
<h1>{this.state.answer}</h1>
<input
type="text"
value={this.state.equation}
onChange={this.handleChange}
></input>
<button onClick={() => this.handleInput}>Enter !</button>
<button onClick={() => console.log(this.state.equation)}>
Log in console
</button>
</div>
</div>
);
}
}
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355185.html
標籤：javascript 反应 计算器
上一篇：antd從陣列中選擇，反應，js
下一篇：用于獲取已保存物件的ElasticSearch_find方法回傳“未找到URI[/s/<space>/api/saved_objects/_find...]和方法[GET]的處理程式”