Read(四）组件实例对象3大属性之: state属性

最新推荐文章于 2024-08-03 16:44:35 发布

李不烦

最新推荐文章于 2024-08-03 16:44:35 发布

阅读量271

点赞数

分类专栏： JavaScript 文章标签： state

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/100679438

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

组件实例对象3大属性之: state属性

1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)
2). 初始化状态:

  constructor (props) {
    super(props)
    this.state = {
      stateProp1 : value1,
      stateProp2 : value2
    }
  }

3). 读取某个状态值

  this.state.statePropertyName

4). 更新状态---->组件界面更新

 this.setState({
    stateProp1 : value1,
    stateProp2 : value2
  })

需求: 自定义组件, 功能说明如下
1. 显示h2标题, 初始文本为: 我喜欢你
2. 点击标题更新为:你喜欢我

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
  
  class LikeMe extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        isLikeMe: false
      }
      this.switchLikeMe = this.switchLikeMe.bind(this)
    }

    switchLikeMe() {
      // 对原来值取反，改变状态
      let isLikeMe = !this.state.isLikeMe;
      // 改变状态后再赋值
      this.setState({isLikeMe})
    }

    render() {
      let text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'
      return <h2 onClick={this.switchLikeMe}>{text}</h2>
    }
  }

  ReactDOM.render(<LikeMe/>, document.getElementById('example'))

</script>
</body>
</html>

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Read(四）组件实例对象3大属性之: state属性

组件实例对象3大属性之: state属性1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)2). 初始化状态: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } }...
复制链接

扫一扫