课题

  1. 程序界面由3个文本编辑框和1个文本标签组成。
  2. 要求文本标签实时显示3个文本编辑框所输入的数字之和。
  3. 文本编辑框输入的不是合法数字时,将其值视为0。
  4. 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 编程的更多相关文章

  1. ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  2. ReactiveX 学习笔记(0)学习资源

    ReactiveX 学习笔记 ReactiveX 学习笔记(1) ReactiveX 学习笔记(2)创建数据流 ReactiveX 学习笔记(3)转换数据流 ReactiveX 学习笔记(4)过滤数据 ...

  3. ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  4. Dynamic CRM 2013学习笔记(九)CrmFetchKit.js介绍:Fetchxml、多表联合查询, 批量更新

    CrmFetchKit.js是一个跨浏览器的一个类库,允许通过JavaScript来执行fetch xml的查询,还可以实现批量更新,分页查询等.目前已支持Chrome 25, Firefox 19 ...

  5. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  6. Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识

    目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...

  7. Nodejs学习笔记(六)—Node.js + Express 构建网站预备知识

    前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...

  8. [原创]java WEB学习笔记28: 会话与状态管理Cookie 机制

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果

    应大家的要求,还是把完整的project文件贴出来,大家省点事:http://www.kuaipan.cn/file/id_48923272389086450.htm 先看看执行效果,我用的群创7寸屏 ...

随机推荐

  1. 如何查看电脑已连接的WiFi密码

    控制面板->网络和Internet->网络和共享中心 点击已连接的WLAN网络,查看“WLAN状态”->无线属性->安全 在显示字符下可以看到已连接wifi的密码

  2. Vue Affix组件

    在vue的项目中经常用到固钉,但是 element-ui 上并没有提供这样的组件可供使用,ant-design-vue 有提供,总不能为了这一个组件再去引入一个组件库吧 下面是一个封装好的 affix ...

  3. Java面向对象程序设计的六大基本原则

    1.开闭原则(Open Close Principle) 定义:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 开放-封闭原则的意思就是说,你设计的时候,时刻要考虑,尽量让这个类是足够好,写 ...

  4. @cacheevict 清除多个key

    @Caching(evict={@CacheEvict(“a1”),@CacheEvict(“a2”,allEntries=true)}): 参考:https://www.cnblogs.com/ha ...

  5. 蓝桥第八届省赛 javaB组承压计算

    X星球的高科技实验室中整齐地堆放着某批珍贵金属原料. 每块金属原料的外形.尺寸完全一致,但重量不同.金属材料被严格地堆放成金字塔形. 7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 ...

  6. 解决讨厌的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    问题: 执行任何hadoop命令,都会提示如下WARN.虽然影响不大,但是每次运行一个命令都有这么个WARN,让人很不爽,作为一个精致的男人, 必须要干掉它. [root@master logs]# ...

  7. python 打印到控制台变颜色

    1 格式:\033[显示方式;前景色;背景色m 2 3 说明: 4 前景色 背景色 颜色 5 --------------------------------------- 6 30 40 黑色 7 ...

  8. gin的url查询参数解析

    gin作为go语言最知名的网络库,在这里我简要介绍一下url的查询参数解析.主要是这里面存在一些需要注意的地方.这里,直接给出代码,和运行结果,在必要的地方进行分析. 代码1: type Struct ...

  9. TableVie优化方法和优化机制

    1,UITableview的优化方法(缓存高度,异步绘制,减少层级,hide,避免离屏渲染) (1)缓存高度:当我们创建frame模型的时候,计算出来cell的高度的时候,我们可以将cell的高度缓存 ...

  10. REST API TO MiniProgram 上线WordPress官方插件库

    全新开发的用于 wordpress微信小程序的插件 REST API TO MiniProgram今天上线WordPress官方插件库.这个插件的上一个版本叫:wp-rest-api-for-app, ...