Question

我注意到Javascript中有布尔值的状态。考虑下面的小型React实验模仿Facebook中的Like按钮如何在客户端工作：

export default class App extends Component {
    state = {
        liked: false,
        likes: 34
    }

    toggleLike = (e) => {
        this.setState(state => ({
            liked: !state.liked,
            likes: (!state.liked) ? state.likes + 1 : state.likes - 1
        }))
    }

    render() {
        return(
            <button onClick={this.toggleLike}>
                <label className={(this.state.liked) ? 'liked' : null}>Like:</label>
                <span>{this.state.likes}</span>
            </button>
        )
    }
}

如果this.state.liked为true，则喜欢计数必须增加1并且＃34;喜欢＆＃34; label必须添加一个名为的类名 liked，将文字颜色变为浅蓝色。代码中没有错误，但这让我感到困惑：

在toggleLike()方法中，条件为(!state.liked);但是在HTML中的className呈现中，它是(this.state.liked)

我不明白这是否意味着＆＃34;如果新的州值不等于初始值＆＃34;或者＆＃34;如果新的州值是真或假＆＃34;。

Answer 1

两者都在检查“新状态值是真还是假”。

渲染器根据当前状态值显示className（“如果新状态为true，则执行其他操作”，否则执行其他操作）。另一方面，setState使用否定值，因为它想要根据前一个值设置喜欢（“如果新状态为false，则执行某些操作，否则执行其他操作”。）

setState也可以使用state.liked而不是!state.liked，然后代替写：

likes: (!state.liked) ? state.likes + 1 : state.likes - 1

代码如下：

likes: (state.liked) ? state.likes -1 : state.likes + 1

底线 - 两者都可以使用state.liked，并且可能不那么令人困惑。

使用布尔值更新和读取状态

1 个答案: