It is time to add new entries to the wishlist. We will achieve this by reusing forms and models we've built so far.

In this lesson you will learn:

  • MST is not limited to a single state tree. Every model can form a tree on its own
  • Appending model instances to the state tree

New entry component can be a stateless component, using State Model to create an empty entry, just for setting default value.

Once add button was clicked, fire a callback to add new node tor the tree.

import React, {Component} from 'react';
import {observer} from 'mobx-react'; import WishListItemEdit from './WishListItemEdit';
import {WishListItem} from '../models/WishList'; class WishListItemEntry extends Component {
constructor() {
super();
// create an empty entry
this.state = {
entry: WishListItem.create({
name: '',
price: 0
})
}
} render() {
return (
<div>
<WishListItemEdit item={this.state.entry} />
<button onClick={this.onAdd}>Add</button>
</div>
);
} onAdd = () => {
// call the CB
this.props.onAdded(this.state.entry);
// clean the name and price
this.setState({
entry: WishListItem.create({name: '', price: 0})
})
}
} export default observer(WishListItemEntry);

WishListListView.js

import React, {Component} from "react"
import { observer } from "mobx-react" import WishListItemView from "./WishListItemView"
import WishListItemEntry from './WishListItemEntry'; class WishListView extends Component {
render() {
const {wishList} = this.props;
return (
<div className="list">
<ul>{wishList.items.map((item, idx) => <WishListItemView key={idx} item={item} />)}</ul>
Total: {wishList.totalPrice} €
<WishListItemEntry onAdded={this.onItemAdded}/>
</div>
);
} onItemAdded = (entry) => {
if(entry) {
this.props.wishList.add(entry);
}
}
} export default observer(WishListView)

[MST] Create an Entry Form to Add Models to the State Tree的更多相关文章

  1. How to hide an entry in the Add/Remove Programs applet?

    Original link: http://www.winhelponline.com/articles/15/1/How-to-hide-an-entry-in-the-AddRemove-Prog ...

  2. SharePoint自动化系列——Create a local user and add to SharePoint

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 实现过程:在本地创建一个local user并将该user添加到Administrators组中, ...

  3. Mongodb之failed to create service entry worker thread

    Mongodb "failed to create service entry worker thread" 错误. 系统:CentOS release 6.8 mongod.lo ...

  4. Start state is missing. Add at least one state to the flow

    springmvc配置过程中,会配置数据库文件,比如说如下文件:这个时候可能会出现“Start state is missing. Add at least one state to the flow ...

  5. springmvc.xml 中报错:Start state is missing. Add at least one state to the flow

    最近一个学弟问我关于整合springMVC和spring出现的配置文件springmvc.xml出现的Start state is missing. Add at least one state to ...

  6. create index 与 alter table add index 区别

    众所周知,MySQL创建索引有两种语法,即:ALTER TABLE HeadOfState ADD INDEX (LastName, FirstName);CREATE INDEX index_nam ...

  7. [MST] Create Dynamic Types and use Type Composition to Extract Common Functionality

    Since MST offers a runtime type system, it can create and compose types on the fly, making it possib ...

  8. how to create a custom form for sharepoint list

    在VS中创建一个applicationPage映射到Layouts文件夹下,然后代码如下: SPList lstTest = web.Lists["Shared Documents" ...

  9. python---django中form组件(1)简单使用和字段了解

    Django中的Form组件功能: 1.对用户请求的验证 2.生成html代码 Form使用:对用户请求进行验证 前端代码: <form action="/f1.html" ...

随机推荐

  1. NodeJS踩坑实录

    nodejs的常用api url 主要是配置一系列和路径相关的信息 url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 将一个U ...

  2. mysql linux查看配置文件my.cnf位置

    原文:mysql linux查看配置文件my.cnf位置 命令: mysql --help | grep 'Default options' -A 1

  3. Mysql学习总结(31)——MySql使用建议,尽量避免这些问题

    做服务器端开发的同学们,相信对于mysql应该是十分熟悉,但是一旦真正出现问题,你是否能够快速的发现问题的起因,并且解决呢?一旦问题涉及到数据库层面,往往不是那么好解决的,通常来说,我们需要提前做应对 ...

  4. java应届生面试考点收集

    回 到 顶 部 这些知识点来自于之前去百度实习.阿里.蘑菇街校园招聘的电话面试 未完待续 JavaSE 面向对象 封装.继承.多态(包括重载.重写) 常见区别 String.StringBuffer. ...

  5. [AngularJS]Chapter 5 与服务器交互

    第八章有关于缓存的东西. [通过$http交互] 传统的AJAX请求如下 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange ...

  6. Linux下基于多线程的echo

    准备开始写一些Linux 下网络编程以及多线程的blog,就从这个简单的echo程序开始吧. 在echo的服务端使用多线程与客户进行通信,可以实现一个服务端程序同时连接多个客户的功能.那么,到底在服务 ...

  7. csdn第五届在线编程大赛-全然平方

    题目详情 给定整数区间[A,B]问当中有多少个全然平方数. 输入格式: 多组数据,包括两个正整数A,B 1<=A<=B<=2000000000. 输出格式: 每组数据输出一行包括一个 ...

  8. 实践补充 Installing Tomcat 7.0.x on OS X

    我的 Mac 下是1.6的 SDK,下载 Tomcat 8.0 执行后,訪问 http://127.0.0.1:8080 并无反应,并且关闭脚本会报错 : Unsupported major.mino ...

  9. 开心的小明(南阳oj49)(01背包)

    开心的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 小明今天非常开心.家里购置的新房就要领钥匙了,新房里有一间他自己专用的非常宽敞的房间.更让他高兴的是,妈妈 ...

  10. Visual C++文件后缀名释义

    [1] .APS:存放二进制资源的资源辅助中间文件(可加快资源装载速度). [2] .BMP:位图资源文件. [3] .BSC:浏览信息文件.由浏览信息维护工具(BSCMAKE)从原始浏览信息文件(. ...