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. Redis字符串(STRING)中BIT相关命令

    上篇文章我们对STRING数据类型中一些基本的命令进行了介绍,但是没有涉及到BIT相关的命令,本文我们就来看看几个和BIT相关的命令. 本文是Redis系列的第四篇文章,了解前面的文章有助于更好的理解 ...

  2. W10如何开启LinuxBash及安装Ubuntu

    W10如何开启LinuxBash的功能 1)开启开发人员模式 2)启动部分windows功能 完成后重启系统 然后在cmd中输入bash按命令操作即可使用bash命令 3)下载安装ubuntu lxr ...

  3. CodeForces 362E Petya and Pipes

    Petya and Pipes Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces. ...

  4. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  5. 推断CPU 是小端存储(Little endian)还是大端存储(Big endian)模式

    第一个版本号: //return true in big-endian machines bool check_big_endian1() { int a = 0; int *p = &a; ...

  6. iOS知识点汇总

    1.怎样追踪app崩溃率.怎样解决线上闪退 当iOS设备上的App应用闪退时.操作系统会生成一个crash日志.保存在设备上.crash日志上有非常多实用的信息,比方每个正在运行线程的完整堆栈跟踪信息 ...

  7. leetCode 72.Edit Distance (编辑距离) 解题思路和方法

    Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert  ...

  8. VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法

    VC MFC 提供的 API LoadBitmap / LoadImage 类 CBitmap 等都只能操作 BMP 位图,图标.对于其他常用的 JPG / JPEG / GIF / PNG 格式,它 ...

  9. 关于webuploader跨域解决方法

    1.在iis处理程序映射 2.后台ashx处理添加如下代码

  10. JS高级之简单类的定义和继承

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...