在React中修改state上的数据

1.定义组件

新建一个.jsx文件

import React from 'react'
export default class MyBtn extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'123'
        }
    }
    render(){
        return <div>
            <button onClick={()=>{this.myClick()}}>点击</button>
            <p>{this.state.msg}</p>
        </div>
    }
}

2.定义方法

在class中追加

class MyBtn extends React.Component{
 myClick(){
        console.log('这是myClick方法')
        this.setState({
            msg:'321'
        })
    }
}

this.setState的注意事项：

1. 只有this.setState()才能修改并将修改后的数据重新渲染到浏览器上
   直接this.state.msg=‘321’，则只会修改创建的MyBtn实例对象中的数据，但不会渲染到浏览器上
2. 写在this.setState()中的对象，会跟创建的实例的this.state中的属性进行对比，已存在的对其进行覆盖，没有的就进行创建
3. this.setState()运行的过程是异步的，就是这个函数会跟函数下面的代码一起运行，想要在this.setState()运行完后进行操作，就必须加一个回调函数，this.setState({},function(){}),在函数里面进行操作

3.将组件渲染到页面中

import React from 'react'
import ReactDOM from 'react-dom'

import MyBtn from '.jsx文件的路径'

ReactDOM.render(
    <div>
        <MyBtn></MyBtn>
    </div>
    ,document.getElementById('app')
)