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里面的函数不要加（）