反应计算器

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。

这是codepen演示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)};
});

由于 event-pooling

，我将 e.target.attributes.getNamedItem('data-filter').value 代码移到了它自己的变量中

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

您面临的主要错误是，在选择操作员后（通过 handleAction），您的操作员属性被填充。这意味着在您的 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>

反应计算器

React Calculator

javascript

calculator

reactjs