ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程
课题
- 程序界面由3个文本编辑框和1个文本标签组成。
- 要求文本标签实时显示3个文本编辑框所输入的数字之和。
- 文本编辑框输入的不是合法数字时,将其值视为0。
- 3个文本编辑框的初值分别为1,2,3。
创建工程
# 安装 CLI
$ npm install -g create-react-app
# 创建新的应用程序 RxExample
$ create-react-app rx-example --scripts-version=react-scripts-ts
$ cd rx-example
$ npm start
打开 Intellij IDEA, File / New / Project From Existing Sources...,然后选中工程所在文件夹
在向导的第1页选择 Create project from existing sources
完成向导后在点击 Finish 创建工程。
点击 Add Configurations, 点击 +npm
Name: React CLI Server
Scripts: start
点击 OK 完成配置。
点击 React CLI Server 启动程序。
http://localhost:3000/ 可打开网页。
TSLint
打开 tslint.json,将其改为
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"interface-name": false,
"ordered-imports": false,
"no-console": false,
"object-literal-sort-keys": false,
"member-access": false,
"variable-name": false,
"member-ordering": false,
"class-name": false
}
}
CSS
打开 App.css,添加CSS
.number {
width: 50px;
text-align: right;
}
不使用 RxJS 的解决方案
打开 App.tsx,将其改为
import './App.css';
class App extends React.Component {
state = {
number1: '1',
number2: '2',
number3: '3',
result: '',
};
componentDidMount() {
this.onChangeNumber(null);
}
render() {
return (
<div className="App">
<p>
<input name="number1" className="number" value={this.state.number1} onChange={this.onChangeNumber} /> +
<input name="number2" className="number" value={this.state.number2} onChange={this.onChangeNumber} /> +
<input name="number3" className="number" value={this.state.number3} onChange={this.onChangeNumber} /> =
<label>{this.state.result}</label>
</p>
</div>
);
}
onChangeNumber = (e: any) => {
const f = () => {
const g = (s: string) => Number(s) || 0;
this.setState({
result: String(g(this.state.number1) + g(this.state.number2) + g(this.state.number3))
});
};
if (e != null) {
const elem = e.nativeEvent.target as HTMLInputElement;
this.setState({[elem.name]: elem.value}, () => f());
} else {
f();
}
};
}
export default App;
使用 RxJS 的解决方案
打开 App.tsx,将其改为
import './App.css';
import { combineLatest, fromEvent, Observable } from 'rxjs';
import { map, pluck, startWith } from 'rxjs/operators';
class App extends React.Component {
state = {
result2: '',
};
componentDidMount() {
const f = (id: string) => {
const e = document.getElementById(id) as HTMLInputElement;
return fromEvent(e, 'input').pipe<string, string>(pluck('target', 'value'), startWith(e.value)) as Observable<string>;
};
const g = (s: string) => Number(s) || 0;
combineLatest(f('number1'), f('number2'), f('number3'))
.pipe(map((results: string[]) => String(g(results[0]) + g(results[1]) + g(results[2]))))
.subscribe(result2 => this.setState({result2}));
}
render() {
return (
<div className="App">
<p>
<input id="number1" className="number" defaultValue="1" /> +
<input id="number2" className="number" defaultValue="2" /> +
<input id="number3" className="number" defaultValue="3" /> =
<label>{this.state.result2}</label>
</p>
</div>
);
}
}
export default App;
ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程的更多相关文章
- ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- ReactiveX 学习笔记(0)学习资源
ReactiveX 学习笔记 ReactiveX 学习笔记(1) ReactiveX 学习笔记(2)创建数据流 ReactiveX 学习笔记(3)转换数据流 ReactiveX 学习笔记(4)过滤数据 ...
- ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- Dynamic CRM 2013学习笔记(九)CrmFetchKit.js介绍:Fetchxml、多表联合查询, 批量更新
CrmFetchKit.js是一个跨浏览器的一个类库,允许通过JavaScript来执行fetch xml的查询,还可以实现批量更新,分页查询等.目前已支持Chrome 25, Firefox 19 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识
目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...
- Nodejs学习笔记(六)—Node.js + Express 构建网站预备知识
前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...
- [原创]java WEB学习笔记28: 会话与状态管理Cookie 机制
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
应大家的要求,还是把完整的project文件贴出来,大家省点事:http://www.kuaipan.cn/file/id_48923272389086450.htm 先看看执行效果,我用的群创7寸屏 ...
随机推荐
- 如何查看电脑已连接的WiFi密码
控制面板->网络和Internet->网络和共享中心 点击已连接的WLAN网络,查看“WLAN状态”->无线属性->安全 在显示字符下可以看到已连接wifi的密码
- Vue Affix组件
在vue的项目中经常用到固钉,但是 element-ui 上并没有提供这样的组件可供使用,ant-design-vue 有提供,总不能为了这一个组件再去引入一个组件库吧 下面是一个封装好的 affix ...
- Java面向对象程序设计的六大基本原则
1.开闭原则(Open Close Principle) 定义:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 开放-封闭原则的意思就是说,你设计的时候,时刻要考虑,尽量让这个类是足够好,写 ...
- @cacheevict 清除多个key
@Caching(evict={@CacheEvict(“a1”),@CacheEvict(“a2”,allEntries=true)}): 参考:https://www.cnblogs.com/ha ...
- 蓝桥第八届省赛 javaB组承压计算
X星球的高科技实验室中整齐地堆放着某批珍贵金属原料. 每块金属原料的外形.尺寸完全一致,但重量不同.金属材料被严格地堆放成金字塔形. 7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 ...
- 解决讨厌的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
问题: 执行任何hadoop命令,都会提示如下WARN.虽然影响不大,但是每次运行一个命令都有这么个WARN,让人很不爽,作为一个精致的男人, 必须要干掉它. [root@master logs]# ...
- python 打印到控制台变颜色
1 格式:\033[显示方式;前景色;背景色m 2 3 说明: 4 前景色 背景色 颜色 5 --------------------------------------- 6 30 40 黑色 7 ...
- gin的url查询参数解析
gin作为go语言最知名的网络库,在这里我简要介绍一下url的查询参数解析.主要是这里面存在一些需要注意的地方.这里,直接给出代码,和运行结果,在必要的地方进行分析. 代码1: type Struct ...
- TableVie优化方法和优化机制
1,UITableview的优化方法(缓存高度,异步绘制,减少层级,hide,避免离屏渲染) (1)缓存高度:当我们创建frame模型的时候,计算出来cell的高度的时候,我们可以将cell的高度缓存 ...
- REST API TO MiniProgram 上线WordPress官方插件库
全新开发的用于 wordpress微信小程序的插件 REST API TO MiniProgram今天上线WordPress官方插件库.这个插件的上一个版本叫:wp-rest-api-for-app, ...