反应JS | 计算器应用程序 (添加功能)

欢迎来到反应JS计算器应用程序的介绍！这是一个基于ReactJS开发的简单计算器应用程序。它具有基本的计算功能，如加，减，乘，除。此外，我们还添加了一些其他新功能，如历史纪录和记忆计算结果。在这里，我们将介绍这些新功能，并展示如何使用它们。

添加历史记录功能

计算器应用程序现在能够保存用户过去的计算记录。无论何时，只要用户点击“=”按钮，计算器程序将把用户的输入及其计算结果存储在本地存储中。用户可以通过点击计算器页面上的“历史记录”按钮，查看他们的过去计算操作。我们使用ReactJS中的一个组件来呈现所有历史记录。

class CalculatorHistory extends React.Component {
  constructor(props) {
    super(props);

    this.clearHistory = this.clearHistory.bind(this);
    this.renderHistoryRow = this.renderHistoryRow.bind(this);
  }

  clearHistory() {
    localStorage.setItem('history', JSON.stringify([]));
    this.props.clearHistory();
  }

  renderHistoryRow(row, index) {
    return (
      <tr key={index}>
        <td>{row.operation}</td>
        <td>{row.result}</td>
      </tr>
    )
  }

  render() {
    const history = this.props.history;

    return (
      <div>
        <h2>历史记录</h2>
        <button onClick={this.clearHistory}>清除历史记录</button>
        <table>
          <thead>
            <tr>
              <th>操作</th>
              <th>结果</th>
            </tr>
          </thead>
          <tbody>
            {history.map(this.renderHistoryRow)}
          </tbody>
        </table>
      </div>
    )
  }
}

添加记忆计算结果功能

计算器程序还允许用户记住他们上一次的计算结果。这在许多情况下非常有用，比如重复计算时不需要输入相同的数字。用户可以点击计算器界面上的“记忆”按钮，将当前结果存储在本地存储中。用户可以通过另一个按钮将存储的结果添加到当前输入中。

class Calculator extends React.Component {
  constructor(props) {
    super(props);
  
    this.state = {
      value: '',
      result: '',
      memory: null
    };
  
    this.handleChange = this.handleChange.bind(this);
    this.handleOperation = this.handleOperation.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleEvaluate = this.handleEvaluate.bind(this);
    this.handleMemory = this.handleMemory.bind(this);
    this.handleMemoryRecall = this.handleMemoryRecall.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  
  handleOperation(op) {
    if (op === 'C') {
      this.handleClear();
    } else if (op === 'M') {
      this.handleMemory();
    } else {
      this.setState({value: this.state.value + op});
    }
  }
  
  handleClear() {
    this.setState({value: '', result: ''});
  }
  
  handleEvaluate() {
    const expression = this.state.value;
    let result;

    try {
      result = eval(expression);
    } catch (e) {
      result = 'Error';
    }

    const history = JSON.parse(localStorage.getItem('history')) || [];
    history.push({operation: expression, result: result});
    localStorage.setItem('history', JSON.stringify(history));

    this.setState({result: result, value: ''});
  }

  handleMemory() {
    const result = this.state.result;
    const memory = (result !== '') ? result : null;
    this.setState({memory: memory});
  }

  handleMemoryRecall() {
    const memory = this.state.memory;
    if (memory !== null) {
      this.setState({value: this.state.value + String(memory)});
    }
  }
  
  render() {
    const expression = (this.state.value === '') ? '0' : this.state.value;
  
    return (
      <div>
        <h1>计算器</h1>
        <div className="display">{expression}</div>
        <div className="row">
          <CalculatorButton label="7" onClick={() => this.handleOperation('7')}/>
          <CalculatorButton label="8" onClick={() => this.handleOperation('8')}/>
          <CalculatorButton label="9" onClick={() => this.handleOperation('9')}/>
          <CalculatorButton label="/" onClick={() => this.handleOperation('/')}/>
        </div>
        <div className="row">
          <CalculatorButton label="4" onClick={() => this.handleOperation('4')}/>
          <CalculatorButton label="5" onClick={() => this.handleOperation('5')}/>
          <CalculatorButton label="6" onClick={() => this.handleOperation('6')}/>
          <CalculatorButton label="*" onClick={() => this.handleOperation('*')}/>
        </div>
        <div className="row">
          <CalculatorButton label="1" onClick={() => this.handleOperation('1')}/>
          <CalculatorButton label="2" onClick={() => this.handleOperation('2')}/>
          <CalculatorButton label="3" onClick={() => this.handleOperation('3')}/>
          <CalculatorButton label="-" onClick={() => this.handleOperation('-')}/>
        </div>
        <div className="row">
          <CalculatorButton label="0" onClick={() => this.handleOperation('0')}/>
          <CalculatorButton label="." onClick={() => this.handleOperation('.')}/>
          <CalculatorButton label="C" onClick={() => this.handleOperation('C')}/>
          <CalculatorButton label="+" onClick={() => this.handleOperation('+')}/>
        </div>
        <div className="row">
          <button className="memory" onClick={this.handleMemory}>记忆</button>
          <button className="recall" onClick={this.handleMemoryRecall}>记忆回想</button>
          <button className="equals" onClick={this.handleEvaluate}>=</button>
        </div>
        <CalculatorHistory
          history={JSON.parse(localStorage.getItem('history')) || []}
          clearHistory={() => localStorage.setItem('history', JSON.stringify([]))}
        />
      </div>
    );
  }
}

在上面的代码片段中，我们添加了两个按钮：一个用于保存当前计算结果，另一个用于将已保存的结果添加到当前输入中。我们还添加了两个处理程序函数，用于处理这些按钮的点击事件。handleMemory函数将当前结果存储在应用程序的状态中，而handleMemoryRecall函数检查是否有结果存储在应用程序中，如果有，则添加结果到用户的当前输入中。

现在你已经了解了反应JS计算器应用程序的添加功能，你可以尝试使用该应用程序。邀请你通过上面的代码片段创建一个自己的应用程序，并尝试使用新的功能。祝你好运！