import List from "./List/List";
function App() {return (<div><List /></div>);
}
export default App;

import React from 'react'
import "./List.css"
class List extends React.Component {constructor() {super();this.state = {text: '', // 显示的结果值status: 0, // 判断用户是否已经进行求值  0: 是, 1: 否value: "",}}// 输入值change = (e) => {// e.target.innerHTML  获取按钮的值var val = ''; // 定义一个变量进行更新值 if (this.state.status == 0) {if (this.state.text == '0') { // 判断第一次是否是0if (e.target.innerHTML == '+' || e.target.innerHTML == '-' || e.target.innerHTML == '*' || e.target.innerHTML == '/' || e.target.innerHTML == '.') {val = this.state.text + e.target.innerHTML} else {val = e.target.innerHTML;}} else if (this.state.text == '') {if (e.target.innerHTML == '+' || e.target.innerHTML == '*' || e.target.innerHTML == '/') {val = '';} else {val = e.target.innerHTML;}} else {var arr = this.state.text.split('')if (arr.length > 0) { // 获取显示的值最右一位var text = arr[this.state.text.split('').length - 1]}if (text == '+' || text == '-' || text == '*' || text == '/' || text == '.') { // 判断最后一位是否是 ' + '  ' — ' ' * '  ' / 'if (e.target.innerHTML != '+' && e.target.innerHTML != '-' && e.target.innerHTML != '*' && e.target.innerHTML != '/') { // 判断用户再次输入的是否是数字val = this.state.text + e.target.innerHTML} else { // 不是则删除之前的运算符val = this.state.text.substring(0, this.state.text.length - 1) + e.target.innerHTML}} else {val = this.state.text + e.target.innerHTML}}} else {if (e.target.innerHTML == '+' || e.target.innerHTML == '-' || e.target.innerHTML == '*' || e.target.innerHTML == '/') { // 等于后在该值上进行运算,则不覆盖原有的值val = this.state.text + e.target.innerHTML} else { // 对等于后的值不进行计算,则进行覆盖val = e.target.innerHTML;}}var valueText = ''; // 处理实时计算的变量if (val != '') {if (val == '.') {valueText = ''} else {var lastArrs = val.split('')if (lastArrs.length > 0) { // 获取显示的值最右一位var lastTexts = lastArrs[val.split('').length - 1]}if (lastTexts == '+' || lastTexts == '-' || lastTexts == '*' || lastTexts == '/') {valueText = eval(val.substring(0, val.length - 1))} else {valueText = eval(val)}}}this.setState({text: val,status: 0,value: valueText})}// 求值equal = () => {if (this.state.text == '') { } else {var equalArr = this.state.text.split('')var equalText = equalArr[this.state.text.split('').length - 1]if (equalText == '+' || equalText == '-' || equalText == '*' || equalText == '/') {this.state.text = this.state.text.substring(0, this.state.text.length - 1)}this.setState({text: eval(this.state.text),status: 1,value: ''})}}// 清除输入框的值clear = () => {this.setState({text: "", // 用户输入的值status: 0,value: ''})}// 删除最后一位del = () => {if (this.state.text != '') {if (typeof this.state.text === 'number') { // 计算结果后值为数字类型  强制转成字符串类型this.state.text = this.state.text.toString()}this.setState({text: this.state.text.substring(0, this.state.text.length - 1),status: 0})}}render() {return (<div><div className=''><div className='content'>{/* 显示区域 */}<div className='show-num'><input type="text" value={this.state.text} disabled/><input type="text" value={this.state.value} disabled /></div>{/* 键盘区 */}<div className='btn-cont'><div className='number1'><button className='equal' onClick={this.clear}>C</button><button onClick={this.change}>/</button><button onClick={this.change}>*</button></div><div className='number'><button onClick={this.change}>7</button><button onClick={this.change}>8</button><button onClick={this.change}>9</button><button onClick={this.del}>del</button></div><div className='number'><button onClick={this.change}>4</button><button onClick={this.change}>5</button><button onClick={this.change}>6</button><button onClick={this.change}>-</button></div><div className="number"><button onClick={this.change}>1</button><button onClick={this.change}>2</button><button onClick={this.change}>3</button><button onClick={this.change}>+</button></div><div className="number4"><button onClick={this.change}>0</button><button onClick={this.change}>.</button><button className='equal' onClick={this.equal}>=</button></div></div></div></div></div >)}
}
export default List;

*{margin: 0;padding: 0;
}
.content{width: 300px;background-color: blanchedalmond;border: 1px solid blanchedalmond;border-radius: 10px;margin: 0 auto;padding: 10px;margin-top: 10vh;
}
.show-num{margin-bottom: 10px;
}
.show-num input{width: calc(100% - 10px);height: 70px;outline:none;border:none;background-color: #fff;text-align: right;padding-right: 10px;font-size: 36px;
}
.show-num input:last-child{height: 50px;font-size: 20px;
}
.btn-cont .number{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10px;margin-bottom: 10px;place-items: center;
}
.number:last-child{margin-bottom: 0;
}
.number1{display: grid;grid-gap: 10px;place-items: center;grid-template-columns: 2fr repeat(2,1fr);margin-bottom: 10px;
}
.number4{display: grid;grid-gap: 10px;place-items: center;grid-template-columns: repeat(2,1fr) 2fr;
}.btn-cont button{border-radius: 50%;width: 50px;height: 50px;border: 1px solid #999;background-color: #fff;cursor: pointer;text-align: center;line-height: 50px;font-size: 20px;
}
.number1 button:first-child ,.number4 button:last-child{width: 100%;height: 100%;border-radius: 50px;font-size: 24px;
}
.btn-cont button:active{box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}