您的位置：首页 > Web前端 > React

react demo12 (获取组件属性状态this.state)

2017-05-06 22:18 651 查看

需求：创建一个CheckButton的组件，包含一个checkbox类型<input>
复选框在选中和未选中两种状态下会显示不同的文字，即：根据状态渲染
学习：通过this.state读取组件的属性状态值

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react dome</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>

<script type="text/babel">

/*
state：状态
this.state

需求：
创建一个CheckButton的组件，包含一个checkbox类型<input>
复选框在选中和未选中两种状态下会显示不同的文字，即：根据状态渲染

*/

//创建组件
var CheckButton = React.createClass({
//定义初始状态
getInitialState:function(){
return {
//在这个对象中设置属性，将会存储在state中
//默认状态，未选中
isCheck:false
}
},
//定义事件绑定方法
handleChange:function () {
//修改状态值，通过this.state读取设置的状态值
this.setState({
isCheck: !this.state.isCheck
})
},
render:function(){
//根据状态值，设置显示的文字
//在JSX语法中，不能直接使用if/else，使用三目运算符
var text = this.state.isCheck ? "已选中" : "未选中" ;
return (
<div>
<input type="checkbox"  onChange={this.handleChange} />{text}
</div>
);
}
})

//渲染
ReactDOM.render(
<CheckButton/>,
document.getElementById("container")
)

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： react

相关文章推荐

新的分享

章节导航