1.store:

import { observer } from "mobx-react";
import { observable, action, computed ,autorun} from "mobx";
export default class NewStore {
@observable inputValue1; //observable data 注册一个数据,这个数据将会成为一个可mobx监测的数据
@observable inputValue2;
@observable childValue;
constructor() {
this.inputValue1=0; //初始化可监测的数据
this.inputValue2=0;
this.fullValue=0;
this.childValue=0;
}
@action changeValue(s,e){ //注册action ,action里面可以改变mobx注册的数据,从而改变store里的数据
let tar=e.currentTarget;
let val=Math.abs(tar.value);
if(tar.name=='val1'){
this.inputValue1=val;
}else if(tar.name=='val2'){
this.inputValue2=val;
}
} @computed get sum(){ //computed 是自动监测已注册的数据,如果已注册的数据有改变自动执行这个函数
this.fullValue=this.inputValue1+this.inputValue2;
console.log(this.fullValue)
return this.fullValue;
}
@action childEvent(){
this.childValue=this.childValue+3;
}
}

2.all store:

import TestStore from  './test.js';
import NextStore from "./next.js";
import NewStore from "./new.js";
import FormStore from "./form.js";
import MenuStore from "./menu.js";
import NumChange from "./comm/numChange.js" export default {
testStore:new TestStore(),
nextStore:new NextStore(),
newStore:new NewStore(),
formStore:new FormStore(),
menuStore:new MenuStore(),
numChange:new NumChange()
}

3.provider:

import "./js/auto_rem.js";
import "./css/style.scss";
import React from "react";
import { render } from "react-dom";
import { observable, computed, autorun } from "mobx";
import { Provider } from 'mobx-react';
import { Router, Route, hashHistory ,browserHistory} from 'react-router';
import Test from "./src/components/test.js";
import Next from "./src/components/next.js";
import New from "./src/components/new.js";
import Forms from "./src/components/form.js";
import Menu from "./src/components/menu.js";
import store from "./src/store/store.js"; const routes = (
<Route component={App}>
<Route path="/" component={Menu}/>
<Route path="/menu" component={Menu}/>
<Route path="/form" component={Forms}/>
<Route path="/new" component={New}/>
<Route path="/test" component={Test}/>
<Route path="/next" component={Next}/>
</Route>
);
class App extends React.Component {
render() {
return (
<Provider {...store}> //把所有store的数据注入程序组件
<Router history={hashHistory} >
{routes}
</Router>
</Provider>
)
}
} render( < App />, document.getElementById('app'));

4.view :

import {observer,inject} from "mobx-react";
import {observable,action,computed,autorun} from "mobx"; import React,{Component} from "react";
import {render} from "react-dom";
import Child from "./comm/child.js";
@inject(['newStore']) @observer //inject 注入需要的store
export default class New extends Component{
constructor(props) {
super(props);
this.store=this.props.newStore; //通过props来导入访问已注入的store
this.changeValue=this.store.changeValue.bind(this.store,event) //访问store中的事件
}
render(){
return(
<div>
<input type='tel' name='val1' onKeyUp={this.changeValue}/>+ //促发事件改变store里的数据
<input type='tel' name='val2' onKeyUp={this.changeValue}/>=
<span>{this.store.sum}</span> //访问store里的数据,如果有事件促发改变,那么这个数据也会自动改变
<Child/>
</div>
)
}
}

mobx.js 使用教程-react的更多相关文章

  1. 【MobX】MobX 简单入门教程

    一.MobX 介绍 首先看下官网介绍: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive progra ...

  2. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  3. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  4. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  5. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  9. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

随机推荐

  1. extundelete

    http://extundelete.sourceforge.net/options.html 误删除/usr/share目录因此考虑恢复目录过程如下:1.选用extundelete软件来进行恢复,源 ...

  2. TypeScript 之 书写.d.ts文件

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Writing%20Definition%20Files.html ...

  3. Day 04 if判断,while循环,for循环

    if判断语法一:if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例:sex='female'age=18is_beautiful=True if sex == 'female' ...

  4. java 字符集 Charset

    字符集就是为每个字符编个号码.如ASCII编码中,字符 'A' 的号码为 65 (或二进制01000001):GBK编码中,字符 '国' 对应的号码为47610 . 编码:将字符序列转换成二进制序列. ...

  5. ES中文分词器之精确短语匹配(解决了match_phrase匹配不全的问题)

    分词器选择 调研了几种分词器,例如IK分词器,ansj分词器,mmseg分词器,发现IK的分词效果最好.举个例子: 词:<<是的>><span>哈<\span ...

  6. Digispark kickstarter + JoyStick 模拟鼠标

    IDE:Arduino 1.0.4 一.线路连接 S-Y --> P5(A0) S-X --> P2(A1) S-K --> P0 VCC --> VCC GND --> ...

  7. 苹果cms测试

    配置好权限,搞了半天,一直以为是容器镜像的问题 sudo chgrp -hR www-data maccms10 启动容器 docker run --rm -d --network=isolated_ ...

  8. Mysql 【影响性能的几个方面】以及【性能优化顺序】

    服务器性能   cpu  可用内存大小  网络   IO (增加IO子系统) mysql 存储引擎 数据库服务器配置参数(主要优化方向)     数据库结构设计,sql语句.   慢查询

  9. Xshell5 评估过期,需要采购,不能使用

    Xshell5 评估过期,需要采购,不能使用 标签: Xshell linux 2017年10月10日 13:13:1029507人阅读 评论(9) 收藏 举报 版权声明:本文为博主原创文章,未经博主 ...

  10. 蓝桥杯-四阶幻方(DFS)

    标题:四阶幻方 把1~16的数字填入4x4的方格中,使得行.列以及两个对角线的和都相等,满足这样的特征时称为:四阶幻方. 四阶幻方可能有很多方案.如果固定左上角为1,请计算一共有多少种方案. 比如: ...