zoukankan      html  css  js  c++  java
  • react初学_2(prevState)

    直接上代码

    <script type="text/babel">
        class Toggle extends React.Component {
            constructor(props) {
                super(props);
                this.state = {isToggleOn: true};
    
                // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
                this.handleClick = this.handleClick.bind(this);
            }
    
            handleClick() {
                this.setState((prevState) => ({
                    isToggleOn: !prevState.isToggleOn
                }));
            }
    
            render() {
                return (
                    <button onClick={this.handleClick}>
                        {this.state.isToggleOn ? 'ON' : 'OFF'}
                    </button>
                );
            }
        }
    
        ReactDOM.render(
            <Toggle />,
            document.getElementById('example')
        );
    </script>

    代码是抄的,开始看不懂

    handleClick() {
                this.setState((prevState) => ({
                    isToggleOn: !prevState.isToggleOn
                }));
            }

    其实这个里面的prevState是代码上一个状态的state

    而setState里面可以放函数也可以放对象,

    刚开始是放了一个函数

    (prevState) => ({
                    button: !prevState.button
                })

    这是一个箭头函数,注意后面{}外面要加(),因为它代表返回,最后要返回一个对象给setState,就像刚开始的时候setState的用法

    还有一点就是注意onClick里面的函数不要加()

  • 相关阅读:
    centos7 yum 方式安装nginx
    在Windows系统下用命令把应用程序添加到系统服务
    WPF内置命令
    Json解析实例
    端口占用的问题
    WPF里的报警闪烁效果
    python类中的一些神奇方法
    python中交换两个变量值的方法
    lambda应用
    python函数不定长参数
  • 原文地址:https://www.cnblogs.com/WildSky/p/11255247.html
Copyright © 2011-2022 走看看