javascript - react 计算器

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

我对你的代码做了一些修改:

由于状态更新可以是异步的 (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>