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. Java Runnable与Callable区别

    接口定义 #Callable接口 public interface Callable<V> { V call() throws Exception; } #Runnable接口 publi ...

  2. python中a, b = a, a + b

    python中a, b = a, a + b a = 0 b = 1 计算a, b = a, a + b,先计算赋值号右边的部分,即 a = 0, a + b = 0+1=1,然后再赋值给左边 也可以 ...

  3. Office 2010 打开文件后所有的格式成了时间的解决方法

    最新不知道什么原因,每一个 Excel 文件打开后,时需的数据都成了时间格式. 而且改都改不了,改了后第二次打开又成了这个样子. 最后找到解决方法. 如下动画,将 [$F400] 数据格式删除就可以. ...

  4. 推荐一个 .Net Core 的 Redis 库

    这是一个网友写的,原文如下: https://www.cnblogs.com/kellynic/p/9803314.html

  5. MongoDB之 写安全(Write Concern)

    MongoDB Write Concern,简称MongoDB写入安全机制,是一种客户端设置,用于控制写入安全的级别.Write Concern 描述了MongoDB写入到mongod单实例,副本集, ...

  6. Redis 多个数据库

    注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...

  7. fastjson总结

    1,文件的转成字节数组byte[]的时候,可以直接用fastjson序列化和反序列化 2,用@RequestBody接受json的时候,content-type是否已经application/json ...

  8. Elastic Story(一)

    关于_all 当索引一个文档的时候,Elasticsearch 取出所有字段的值拼接成一个大的字符串,作为 _all 字段进行索引.例如,当索引这个文档时: { "tweet": ...

  9. Jenkins进阶-用户权限管理(10)

    在版本发布的由于大家的分工不同,所以想通过控制用户的账号达到权限管理,对每个角色进行权限控制,最初通过"项目矩阵授权策略"的策略对每个项目进行单一的权限控制,当时也满足了效果,随着 ...

  10. 弱网测试—Network-Emulator-Toolkit工具

    参考别人网址:http://blog.csdn.net/no1mwb/article/details/53638681 弱网测试,属于健壮性测试:怎么样去做弱网测试呢? 一.安装弱网测试工具-Netw ...