React State 状态机
2015-08-20 11:57
561 查看
html:
利用状态机可以实现美好的富交互,想想就怕
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="hello"></div> <script type="text/jsx"> var SexButton = React.createClass({ getInitialState: function() { return {sex: 'male'}; }, handleClick: function(event) { this.setState({sex: this.state.sex === 'male' ? 'female' : 'male'}); }, render: function() { var text = this.state.sex === 'male' ? '小伙儿' : '姑娘'; return ( <p onClick={this.handleClick}> 你是 [{text}] ,点击变性 </p> ); } }); React.render( <SexButton />, document.getElementById('hello') ); </script> </body> </html>
利用状态机可以实现美好的富交互,想想就怕
相关文章推荐
- React 组件
- React 互动表单
- ReactJS入门学习一
- React实践笔记-Introduction
- Reactor构架模式及框架概述
- React-Knockout无缝粘合,JavaScript项目MVVM框架下的控件化
- React-Native入门指南--环境配置
- 关于reactivecocoa出现 unrecognized selector sent to instance错误
- React对比Angular的优势在哪
- react native跨平台
- react js component
- react diff算法
- 【React】热热身:Hello World
- 【React】初识React
- React Native通信机制详解
- React Native通信机制详解
- 收集的React.JS资料
- 谈谈 React.js 的核心入门知识
- Reactivecocoa初级使用
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)