React componentWillUpdate

最新推荐文章于 2025-07-17 14:11:27 发布

转载最新推荐文章于 2025-07-17 14:11:27 发布 · 807 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dianzan/p/7324188.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用React实现的状态切换按钮组件。该组件通过点击事件改变内部状态，并在界面上显示当前的状态值。示例代码展示了如何使用React的生命周期方法和setState来更新组件状态。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MySwitch = React.createClass({
    componentWillUpdate:function(props,state){
      console.log(state);
    },
    getInitialState:function(){
      return {switch:false}
    },
    handleClick:function(){
      this.setState({switch:!this.state.switch});
    },
    render:function(){
      return <button onClick={this.handleClick}>
        {"当前状态为："+this.state.switch}
      </button>
    }
  })
  ReactDOM.render(
  <MySwitch/>,
  document.getElementById('example')
  )

</script>

</body>
</html>