react state状态

最新推荐文章于 2021-11-24 17:46:06 发布

神奇大叔

最新推荐文章于 2021-11-24 17:46:06 发布

阅读量170

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104265252

版权

React 专栏收录该内容

44 篇文章 4 订阅

订阅专栏

	state
		(1)存储组件内部状态数据
		(2)setState修改值会引起视图重绘	

	(1)设置state(设置后必须return,否则会报错)

		1、getInitialState:function(){
	
			return {
				对象格式内容数据
			}
		}
		
		2、state={键值对};  给组件对象添加state属性
		3、constructor(props){super(props); this.state={键值对}}

	(2)修改或添加state
		this.setState是异步操作
		
		this.setState({
			对象格式内容数据
		},改变后的回调函数)

	(3)获取state内的值

		this.state.键名

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/libs/browser.min.js"></script>
	<script src="js/libs/react.js"></script>
	<script src="js/libs/react-dom.js"></script>
	<script src="js/libs/jquery-3.4.1.js"></script>

	<style>
		.d1{
			color:orange;
		}
	</style>
	
</head>
<body>
  <div class="big">

  </div>
  <div class="big2">

  </div>
  <div class='big3'>

  </div>

	<script type="text/babel">
		
		var arr=[1,2,3,4,5];
		var arr1=[<p>p1</p>,<p>p2</p>,<p>p3</p>];
		var obj=[{name:'jeff',age:18},{name:'mike',age:19}]

   		var Hello=React.createClass({
			render:function(){
				
				var value=this.state.value;
				var info=value?'jeff':'mike';

				return (

					<div>
					<p>{info}</p>
					<button onClick={this.change}>点我</button>
					</div>
				)
			},
			change:function()
			{
				this.setState({
					value:!this.state.value
				})
			},
			//初始化state
			getInitialState:function(){
				return{
					value:true
				}
			}

   		})
		
		ReactDOM.render(<Hello />,document.querySelector(".big"))



	</script>
	
</body>

</html>