React.js 小书 Lesson10 - 组件的 state 和 setState
转载请注明出处,保留原文链接以及作者信息
在线阅读:http://huziketang.com/books/react
state
我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换。React.js 的 state
就是用来存储这种可变化的状态的。
我们还是拿点赞按钮做例子,它具有已点赞和未点赞两种状态。那么就可以把这个状态存储在 state 中。修改 src/index.js
为:
import React,{ Component } from 'react' import ReactDOM from 'react-dom' import './index.css' class LikeButton extends Component { constructor () { super() this.state = { isLiked: false } } handleClickOnLikeButton () { this.setState({ isLiked: !this.state.isLiked }) } render () { return ( <button onClick={this.handleClickOnLikeButton.bind(this)}> {this.state.isLiked ? '取消' : '点赞'}