react-state

最新推荐文章于 2024-01-24 16:14:20 发布

weixin_44337220

最新推荐文章于 2024-01-24 16:14:20 发布

阅读量51

点赞数

本文链接：https://blog.csdn.net/weixin_44337220/article/details/103829907

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="example1"></div>
    <div id="example2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        /*
        * 需求：定义组件，功能如下
        * 1.显示h2标题，初始文本为：你喜欢我
        * 2.点击标题更新为：我喜欢你
        * */
    //    1.定义组件
        class Like extends React.Component{

            constructor(props){
                super(props)

            //    初始化状态
                this.state={
                    isLikeMe:false
                }

            //    将新增方法中this强制绑定为组件对象
                this.handleClick=this.handleClick.bind(this)
            }

            //新添加方法：内部this默认不是组件对象，而是undefined
            handleClick(){
            //    得到原来状态
                console.log(this)
                const  isLikeMe= !this.state.isLikeMe
            //    更新状态 {isLikeme}={isLikeme:isLikeme}
                this.setState({isLikeMe})
            }

            //重写组件内方法
            render(){
            //    读取状态
                const {isLikeMe}=this.state
            return   <h2 onClick={this.handleClick}>{isLikeMe?'你习惯我':'我喜欢你'}</h2>
            }
        }
    //    2.渲染组件标签 <like></like>
        ReactDOM.render( <Like/>,document.getElementById('example1') )

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

weixin_44337220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-state

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example1"></div> ...
复制链接

扫一扫