React状态例子-计算器

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
计算器：

class Cont extends React.Component{
     
  constructor(props){
     
      super(props)
       //组件内部的状态管理
      //数据是可以引发页面响应的
      this.state={
     
          num:'',
          text:''
      }  
  }
  
  getTextFun(e){
     
      this.setState({
     
      
          text: +e.target.value
      })
  }

  getNumFun(){
     
      this.setState({
     
          num:this.props.number+this.state.text
      })
  }

 

  render(){
     
        
      return <div>
              <span>{
     this.props.number}</span>
              <span>+</span>
              <input  onChange={
     (e)=>{
     this.getTextFun(e)}} type="text"/>
              <button onClick={
     ()=>{
     this.getNumFun()}}>=</button>
              <span>{
     this.state.num}</span>
          </div>
  }
}

let root = document.querySelector('#root');
        ReactDOM.render(
          <Cont number={
     10}/>,
          root
      )

效果图