反應計算器

Question

我正在嘗試構建 React 計算器。 到目前為止，它僅在我的第二個數字的長度等於 1 時才有效。如果數字更多，它就會中斷。 這是代碼：

class Calculator extends Component {
  constructor(props) {
      super(props);
      this.state = {
        current: 0,
        total: 0,
        operator: ''
      };
  }
  handleType = (e) =>{
    const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total ) ? '' : this.state.current
    this.setState({
      current: parseInt(current + e.target.attributes.getNamedItem('data-filter').value)
    });
  }
calculate = (sign, number) => {
  const total = this.state.total;
  console.log(total);
  switch(sign){
     case "-":
      return total - number;
        break;
     case "+":
        return  total + number;
        break;
     case "*":
        return  total * number;
        break;
     case "/":
       return  total / number;
        break;
     default:
       return 0;
  }
};

handleAction = (e) =>{
  const operator = e.target.attributes.getNamedItem('data-filter').value;
  console.log(operator);
  this.setState({
     total: this.state.current,
     operator: operator
  });
  console.log(this.state);
}
getResult = () =>{
  this.setState({
     current: this.calculate(this.state.operator, this.state.current)
    });
}

  render() {
    return (
      <div className="Calculator text-center">
          <h2>Result: {this.state.current} </h2>
          <div className="row">
              <button data-filter="7" onClick={this.handleType}>7</button>
              <button data-filter="8" onClick={this.handleType} >8</button>
              <button data-filter="9" onClick={this.handleType} >9</button>
              <button data-filter="+" onClick ={this.handleAction} >+</button>
          </div>
          <div className="row">
              <button data-filter="4" onClick={this.handleType}>4</button>
              <button data-filter="5" onClick={this.handleType}>5</button>
              <button data-filter="6" onClick={this.handleType}>6</button>
              <button data-filter="-" onClick ={this.handleAction}  >-</button>
          </div>
          <div className="row">
              <button data-filter="1" onClick={this.handleType}>1</button>
              <button data-filter="2" onClick={this.handleType}>2</button>
              <button data-filter="3" onClick={this.handleType}>3</button>
              <button data-filter="*" onClick ={this.handleAction}  >*</button>
              <button data-filter="/" onClick ={this.handleAction}  >/</button>
          </div>
          <div className="row">
              <button>0</button>
              <button>save</button>
              <button>cancel</button>
              <button onClick={this.getResult}>=</button>
          </div>

      </div>
    );
  }
}

我知道問題是我的情況：

  const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total ) ? '' : this.state.current

它適用於第一個數字，當 operator='' 但一旦我有一個操作員，它就不允許我讓我的數字大於 9。

這是代碼筆演示http://codepen.io/polinaz/pen/PmLoKJ?editors=0010

任何想法如何解決它？ 謝謝：）

Answer 1

做了一些更改，請參閱片段。

工作片段：

 class Calculator extends React.Component { constructor(props) { super(props); this.state = { current: '', total: 0, operator: '' }; } handleType = (e) =>{ const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total ) ? '' : this.state.current this.setState({ current: this.state.current + e.target.attributes.getNamedItem('data-filter').value }); } calculate() { const total = parseInt(this.state.total); const current = parseInt(this.state.current); const sign = this.state.operator; switch(sign){ case "-": return total - current; break; case "+": return total + current; break; case "*": return total * current; break; case "/": return total / current; break; default: return 0; } }; handleAction = (e) =>{ const operator = e.target.attributes.getNamedItem('data-filter').value; this.setState({ total: this.state.current, current: '', operator: operator }); } getResult = () => { this.setState({ total: this.calculate(), current: '' }); } cancel = () => { this.setState({ total: '', current: '', operator: '' }) } render() { return ( <div className="Calculator text-center"> Number: {this.state.current} <h2>Result: {this.state.total} </h2> <div className="row"> <button data-filter="7" onClick={this.handleType}>7</button> <button data-filter="8" onClick={this.handleType} >8</button> <button data-filter="9" onClick={this.handleType} >9</button> <button data-filter="+" onClick ={this.handleAction} >+</button> </div> <div className="row"> <button data-filter="4" onClick={this.handleType}>4</button> <button data-filter="5" onClick={this.handleType}>5</button> <button data-filter="6" onClick={this.handleType}>6</button> <button data-filter="-" onClick ={this.handleAction} >-</button> </div> <div className="row"> <button data-filter="1" onClick={this.handleType}>1</button> <button data-filter="2" onClick={this.handleType}>2</button> <button data-filter="3" onClick={this.handleType}>3</button> <button data-filter="*" onClick ={this.handleAction} >*</button> <button data-filter="/" onClick ={this.handleAction} >/</button> </div> <div className="row"> <button data-filter="0" onClick={this.handleType}>0</button> <button>save</button> <button onClick={this.cancel}>cancel</button> <button onClick={this.getResult}>=</button> </div> </div> ); } } ReactDOM.render(<Calculator/>, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'>

Answer 2

我對您的代碼進行了一些更改：

由於狀態更新可以是異步的（ https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ），使用以前的狀態值是非常糟糕的做法您使用的方式：

this.setState({
    current: parseInt(current + e.target.attributes.getNamedItem('data-filter').value)
});

我已將其中一些更改為這種格式：

this.setState((prevState) => {
  const current = prevState.current;
  return {current: parseInt(current + value)};
});

由於事件池，我將e.target.attributes.getNamedItem('data-filter').value代碼移動到它自己的變量中

handleType (e) {
    const value = e.target.attributes.getNamedItem('data-filter').value;

您面臨的主要錯誤是，在選擇 Operator 后（通過handleAction ），您的 operator 屬性被填充。 這意味着在您的handleType中，您進行了檢查： this.state.operator != ''

const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total ) ? '' : this.state.current

這意味着您忽略了先前選擇的當前值。 將其設置為 '' 然后將其附加到當前值。

 class Calculator extends React.Component { constructor(props) { super(props); this.state = { current: 0, total: 0, operator: '' }; this.handleType = this.handleType.bind(this); this.calculate = this.calculate.bind(this); this.handleAction = this.handleAction.bind(this); this. getResult = this.getResult.bind(this); } handleType (e) { const value = e.target.attributes.getNamedItem('data-filter').value; this.setState((prevState) => { const current = (this.state.current == 0 || this.state.current == this.state.total ) ? '' : this.state.current; return {current: parseInt(current + value)}; }); } calculate (sign, number) { const total = this.state.total; console.log(total); switch(sign){ case "-": return total - number; break; case "+": return total + number; break; case "*": return total * number; break; case "/": return total / number; break; default: return 0; } }; handleAction (e) { const operator = e.target.attributes.getNamedItem('data-filter').value; this.setState((prevState) => { return { total: prevState.current, operator: operator, current: 0 } }); console.log(this.state); } getResult () { this.setState({ current: this.calculate(this.state.operator, this.state.current) }); } render() { return ( <div className="Calculator text-center"> <h2>Result: {this.state.current} </h2> <div className="row"> <button data-filter="7" onClick={this.handleType}>7</button> <button data-filter="8" onClick={this.handleType} >8</button> <button data-filter="9" onClick={this.handleType} >9</button> <button data-filter="+" onClick ={this.handleAction} >+</button> </div> <div className="row"> <button data-filter="4" onClick={this.handleType}>4</button> <button data-filter="5" onClick={this.handleType}>5</button> <button data-filter="6" onClick={this.handleType}>6</button> <button data-filter="-" onClick ={this.handleAction} >-</button> </div> <div className="row"> <button data-filter="1" onClick={this.handleType}>1</button> <button data-filter="2" onClick={this.handleType}>2</button> <button data-filter="3" onClick={this.handleType}>3</button> <button data-filter="*" onClick ={this.handleAction} >*</button> <button data-filter="/" onClick ={this.handleAction} >/</button> </div> <div className="row"> <button data-filter="0" onClick={this.handleType}>0</button> <button>save</button> <button>cancel</button> <button onClick={this.getResult}>=</button> </div> </div> ); } } ReactDOM.render( <Calculator/>, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div>

Answer 3

可以看我的 github 科學計算器項目https://github.com/sajadab/calculator