React组件简单使用state注册数据

缪金谷 442 0

React组件简单使用state注册数据

简单的使用state实现数字的加减

//注册一个Counter组件
class Counter extends React.Component {
   constructor(props) {
       super(props);
       //改变函数的this指向
       this.handleAddOne = this.handleAddOne.bind(this)
       this.handleMinusOne = this.handleMinusOne.bind(this)
       this.handleReset = this.handleReset.bind(this)
       //定义state注册使用的数据
       this.state = {
           count: 0
       }
   }
   handleAddOne() {
       //通过setState函数改变并渲染需要改变的值
       this.setState((prevState) => {
           //prevState为上一次状态
           return {
               count: prevState.count + 1
           }
       })
   }
   handleMinusOne() {
       this.setState((prevState) => {
           return {
               count: prevState.count - 1
           }
       })
   }
   handleReset() {
       //setState可以直接传对象形式(以前用法不推荐见最后注意点)
       this.setState({
           count: 0
       })
   }
   render() {
       return (
           <div>
               <h1>Count:{this.state.count}</h1>
               <button onClick={this.handleAddOne}>+1</button>
               <button onClick={this.handleMinusOne}>-1</button>
               <button onClick={this.handleReset}>reset</button>
           </div>
       )
   }
}
//获取dom节点
const root = document.getElementById('app')
//将组件渲染到节点中
ReactDOM.render(<Counter />, root)

注意:setState是异步操作,所以尽量使用函数传值的方法,可以通过prevState避免因为异步出现错误


发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~