React this.state

最新推荐文章于 2024-04-24 09:24:11 发布

原创最新推荐文章于 2024-04-24 09:24:11 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React

React 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的React组件——点赞按钮的实现方式。该组件通过React的状态管理实现了点击切换点赞状态的功能，并展示了如何使用React的生命周期方法来更新UI。此外，还介绍了如何利用ReactDOM将React组件渲染到网页上。

<!doctype html>
<html>
<head>
		<meta charset="utf-8">
	
	<script src="../build/react.js"></script>
	<script src="../build/react-dom.js"></script>
	<script src="../build/browser.min.js"></script>
</head>
<body>
	<div id="abc"></div>
	<script type="text/babel">
		
		var LikeButton = React.createClass({
			getInitialState:function(){<!--初始化状态值-->
				return {liked:true};
			},
			handleClick:function(event){<!--处理函数 不断的取反-->
				this.setState({liked: !this.state.liked});
			},
			render:function(){
				var text=this.state.liked? 'liked':'havent liked';
				return (
					<p onClick={this.handleClick}>
						you {text} this.Click to toggle.
					</p>
				);
			}
		});
		

		ReactDOM.render(
		<LikeButton />
		,
			document.getElementById('abc')
		);
	</script>
</body>
</html>