react状态组件事件中的四种获取this方式的写法

最新推荐文章于 2022-11-10 16:30:21 发布

lxslxskxs

最新推荐文章于 2022-11-10 16:30:21 发布

阅读量550

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/lxs19930928/article/details/126433451

版权

react 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

react状态组件事件中的四种获取this方式的写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    age: '16',
                    sex: '男',
                    flag: true,
                    addr:"中国"
                }
                this.updateAge = this.updateAge.bind(this)
            }
            // 1、函数的作用域由函数调用的时候决定的,而不是函数声明的时候
            // 如果使用函数的形式直接定义,要在constructor去绑定this改变this指向
            updateAge() {
                // console.log(this); // 如果不在constructor里面去绑定this打印出来的是undefined
                this.setState({
                    age: 5
                })
            }

            // 2、要么使用箭头函数赋值的方法来定义函数,这是工作中比较常用的方法 推荐使用这种写法
            updateState = () => {
                let sex = this.state.sex;
                sex = sex == '男' ? '女' : '男'
                console.log("sex===",sex)
                this.setState({
                    sex
                })
            }
            // 更新性别
            updateSex(){
              let sex = this.state.sex;
              sex = sex == "男" ? '女' : '男'
                this.setState({
                    sex
                })
            }
            // 更新地址
            updateAddr(){
              let addr = this.state.addr;
              addr = addr == "中国" ? '华夏' : '中国'
                this.setState({
                  addr
                })
            }

            render() {
                return <div>
                    <h1>这是一个有状态组件</h1>
                    <h1>姓名：{this.props.name}</h1>
                    <h1>年龄：{this.state.age}</h1>
                    <h1>性别：{this.state.sex}</h1>
                    <h1>地址：{this.state.addr}</h1>
                    <button onClick={ this.updateAge }>更新年龄</button>
                    <button onClick={ this.updateState }>{this.state.flag ? 'YES' : 'NO'}</button>
                    <button onClick={ this.updateSex.bind(this) }>更新性别</button>
                    <button onClick={()=> this.updateAddr() }>更新地址</button>
                </div>
            }
        }
        ReactDOM.render(
            <Hello name="weiwei"/>,
            document.getElementById("root")
        )
    </script>
</body>
</html>