zl程序教程

您现在的位置是:首页 >  其他

当前栏目

状态(变量替换)

状态变量 替换
2023-09-27 14:25:18 时间

要放到state里面用setState去替换

import React from 'react'


export default class App extends React.Component {

    // 第一种放变量的方法,用关键字state
    state={
        mytext:"收藏",
        myShow:true
    }
    
    //另外一种写法使用constructor 效果和上面的一样
    constructor(){
        super()
        this.state={
            mytext:"收藏",
            myShow:true,
        }
    }

    

    render() {
        return (
            <div>
              <h1>欢迎来到react开发</h1>
              <button onClick={()=>{
                // 修改变量 并且通知dom更新 要用 关键字 this.setState
                this.setState({
                      myShow:!this.state.myShow
                    })
                
                if(this.state.myShow){
                    console.log("收藏逻辑")
                }
                else{
                    console.log("取消收藏逻辑")
                }

                  }}>{this.state.myShow?"收藏":"取消收藏"}</button>
            </div>
        )
    }
}