用 React 实现计算器（freeCodeCamp练手)

题目要求是做一个计算器出来，要求实现加减乘除这些基本的功能，点击 = 出结果，点击 AC 清空。

一开始的难点在于：把数字拼凑起来。比如点击 4，再点击 9 ，就代表 49 。想了一下，决定用字符串拼合的方式做：

点击 4，再点击 9 ，再点击 + 号，字符串拼的话直接是  "49+" ，这样前面只单纯展示。

数字拼凑的难点在于确定要拼凑的对象，使用 React 获取 DOM 元素节点的文本内容。这一块找了很久，才找到是用 e.target.innerText 。

再接下来就是最后如何把字符串里的运算变成数学运算，也是找了半天才知道用 eval 函数，可以运算字符串里面的数学公式。

这样基本上就没有什么难点了。

class Caculator extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      text:""
    }
    this.change = this.change.bind(this)
    this.cal = this.cal.bind(this)
    this.cl = this.cl.bind(this)
  }

  change(e){
    this.setState({
      text:this.state.text + e.target.innerText
    })
  }

  cal(){
    this.setState({
      text: eval(this.state.text)
    })

  }

  cl(){
    this.setState({
      text:""
    })
  }

  render(){
    return(
    <div id="caculator">

      <div id="display">
        {this.state.text}
      </div>

      <div id="number">
        <div id="one" onClick={this.change}>
          1
        </div>
        <div id="two" onClick={this.change}>
          2
        </div>
        <div id="three" onClick={this.change}>
          3
        </div>
        <div id="four" onClick={this.change}>
          4
        </div>
        <div id="five" onClick={this.change}>
          5
        </div>
        <div id="six" onClick={this.change}>
          6
        </div>
        <div id="seven" onClick={this.change}>
          7
        </div>
        <div id="eight" onClick={this.change}>
          8
        </div>
        <div id="night" onClick={this.change}>
          9
        </div>
        <div id="zero" onClick={this.change}>
          0
        </div>
        <div id="decimal" onClick={this.change}>
          .
        </div>   
        <div id="add" onClick={this.change}>
          +
        </div>
        <div id="substract" onClick={this.change}>
          -
        </div>
        <div id="multiply" onClick={this.change}>
          *
        </div>
        <div id="divide" onClick={this.change}>
          /
        </div>
        <div id="equals" onClick={this.cal}>
          =
        </div>
        <div id="clear" onClick={this.cl}>
          AC
        </div>
      </div>

    </div>
  )
 }
} 

ReactDOM.render(
  <Caculator/>,
  document.getElementById('root')
);

点击查看 CodePen 演示 （布局啥的都没搞，所以贼丑）。