阅读 246
02 手摸手教学-React中的state和setState?

02 手摸手教学-React中的state和setState?

接着上一个分享,如果没看过,请移步再观看更佳哦 # 01 手摸手教学-React中的JSX语法-你真的会JSX吗?

1 事件、state与setState

在App.js中:

import React, { Component } from 'react'

//1、实现点击弹框效果(事件基本格式)
export default class App5 extends Component {
handleClick(){
alert(132456)
}

render() {
    return (
        <div>
            <button onClick={this.handleClick}>按钮</button>
        </div>
    )
  }
}
复制代码

2、实现累加的功能 (状态的使用1)

export default class App4 extends Component {
   constructor(props){
      super(props)
         this.state = {
         num: 0
      }
   // 按钮的函数写法的前提
   this.handleClick = this.handleClick.bind(this);
}
复制代码

handleClick中

handleClick(){
    this.setState({
    num: this.state.num+1
    })
}
复制代码

render中

render() {
    return (
        <div>
            <h2>{ this.state.num }</h2>
                {/* 通过bind来改变this的指向 */}
                {/* <button onClick={this.handleClick.bind(this)}>按钮1 </button>*/}
                {/* 箭头函数默认没有this,所以this指向数组对象 */}
                {/* <button onClick={()=>this.handleClick()}>按钮2 `</button>` */}
            <button onClick={this.handleClick}>按钮3 </button>
        </div>
    )
}
复制代码

3、实现双向数据绑定 (状态的使用2)

export default class App5 extends Component {
constructor(p){
super(p)
this.state = {
name: "你好,世界"
}
}
handleChange(e){
console.log(e.currentTarget.value)
console.log(e.target.value)
this.setState({
name: e.target.value
})
}
render() {
return (
`<div>`
`<h2>`{ this.state.name }`</h2>`
<input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} />
`</div>`
)
}
}
复制代码

4、state的简写

App6.js中:

import React, { Component } from 'react'

export default class App6 extends Component {
    // 写在construtor中的state也可以简写
    state = {
        username: "张三"
    }
    
    render() {
        return (
            `<div>`
                `<h1>`{this.state.username}`</h1>`
                `<button onClick={this.handleClick.bind(this)}>`按钮`</button>`
            `</div>`
        )
    }
    
    handleClick(){
        this.setState({
            username: "李四"
        })
    }
}
复制代码

5、setState是异步的

我们可以通过以下代码验证 setState 是异步或是同步:

import React, { Component } from 'react'

export default class App5 extends Component {
    state = {
        msg: "你好世界"
    }
    
    render() {
        return (
            `<div>`
                `<h2>`{this.state.msg}`</h2>`
                `<button onClick={this.handleClick.bind(this)}>`改变msg`</button>`
            `</div>`
        )
    }
    
    handleClick() {
        // this.setState是异步还是同步呢?
        this.setState({
            msg: "hello world"  // 修改msg
        })
        console.log(this.state.msg) // 同步则输出“hello world”,异步则输出“你好世界”

        // 验证结果:this.setState是异步的
    }
}
复制代码

最后 setState 还有回调函数:

    this.setState({
        msg: "hello world"
    }, ()=>{
        console.log(this.state.msg);    // hello world
    })
复制代码

如果想要在修改数据后调用该数据,就可以使用回调函数。

好啦,这次就分享这么多,因为我也正在学习中,有错误的希望大家指出来,一起进步丫

文章分类
前端
文章标签