组件的状态

最新推荐文章于 2023-09-23 10:54:00 发布

Leon_Jinhai_Sun

最新推荐文章于 2023-09-23 10:54:00 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/103518512

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-带有状态的组件.html</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
    class MyComponent extends React.Component {
        constructor () {
            // 如果子类加入了 constructor 构造函数，则一定要手动调用父类的构造函数 super
            super()
            // React 组件需要通过手动为组件类添加 state 成员来初始化：ViewModel
            // state 等价于 Vue 中的 data
            // 接下来就可以在该组件管理的模板中通过 {} 来访问绑定数据了
            this.state = {
                message: 'Hello, MyComponent!'
            }
        }

        render () {
            return (
                <div>
                    <h1>{this.state.message}</h1>
                    <h1>{this.state.message}</h1>
                    <h1>{this.state.message}</h1>
                    <h1>{this.state.message}</h1>
                    <h1>{this.state.message}</h1>
                    <h1>{this.state.message}</h1>
                    {/*
              * 事件绑定函数默认情况下内部的 this 指向 Window
              * 自动接收一个 event 事件源对象
              * 1. this 指向了 Window
              * 2. 只能得到 event 无法传参
              */}

                    {
                        /*
                         * bind 了 this 的函数调用的时候，好会给你传递一个 event 事件源对象
                         * 内部的 this 就是你 bind 的那个参数
                         * 1. 可以指定 this
                         * 2. 支持传参数，参数在前，事件源对象在最后
                         * 推荐这种方式
                         */
                    }
                    <button onClick={this.handleClick.bind(this)}>点击改变 message</button>

                </div>
            )
        }

        // 规范：处理事件方法都取名为 handlexxx
        handleClick (num1, num2, e) {
            console.log(num1, num2, e)
            // console.log('handle click')
            // console.log(this) // 默认是 window

            // React 不是使用的类似于 Vue 中的 Object.defineProperty() 方式 get、set
            // this.state.message = 'hello world'

            // 现在只需要知道，如果要修改 state 中的数据并且希望得到视图更新，则一定要使用
            // this.setState 方法
            this.setState({
              message: 'hello world'
            })
        }
    }

    const element = <MyComponent />

    ReactDOM.render(element, document.getElementById('app'))
</script>
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件的状态

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10-带有状态的组件.html</title></head><body><div id="app"></div>&...
复制链接

扫一扫