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