State用法

最新推荐文章于 2023-07-25 00:02:04 发布

空中海

最新推荐文章于 2023-07-25 00:02:04 发布

阅读量478

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/liuyinghui523/article/details/127504144

版权

React 组件状态管理按钮点击事件

关键词由CSDN通过智能技术生成

import React, { Component } from 'react' 

import ReactDOM from 'react-dom' 

class App extends Component { 

constructor() { 

super() 

this.state = { 

name: 'React', 

isLiked: false 

} 

}

handleBtnClick = () => { 

this.setState({ 

isLiked: !this.state.isLiked 

}) 

}

render () { 

return ( 

<div> 

<h1>欢迎来到{this.state.name}的世界</h1> 

<button onClick={this.handleBtnClick}> 

{ 

this.state.isLiked ? '❤取消' : '🖤收藏' 

} 

</button> 

</div> 

) 

} 

}

ReactDOM.render( 

<App/>, 

document.getElementById('root') 

)