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. Vue 做项目经验

    Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...

  2. ASP.NET-EF基础知识

    定义 asp.net Entity Framework是微软以ADO.NET为基础发展出来的对象关系对应(OR Mapping)解决方案.   三种EF工作模式(自己理解的) 从数据库表创建类 从类创 ...

  3. HDU 4311 Contest 2

    求的是曼哈顿距离.可以把X,Y的距离分开来求.其中,求X.Y的距离可以通过排序后递推的方式求出值的. #include <iostream> #include <algorithm& ...

  4. mysql的查询练习1

    1.多表查询

  5. extjs 时间范围选择的实现

    extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下 效果图: watermark/2/text/aHR0cDov ...

  6. ORA-01261: Parameter db_recovery_file_dest destination string cannot be translat

    查看了Oracle的初始化文件. $cat /oracle/oms/102_64/dbs/initSID.ora 如:db_recovery_file_dest='/oracle/oms/flash_ ...

  7. cximage功能简介

    CxImage是一个可以用于MFC 的C++图像处理类库类,它可以打开,保存,显示,转换各种常见格式的图像文件,比如BMP, JPEG, GIF, PNG, TIFF, MNG, ICO, PCX, ...

  8. xBIM 高级02 插入复制功能

    系列目录    [已更新最新开发文章,点击查看详细]  IFC 模型中的合并和删除实体是一个非常重要的任务,因为 IFC 不是一个分层结构.它是一个复杂的结构,具有潜在的循环关系,是一个双向导航.在单 ...

  9. BZOJ 2844 高斯消元 线性基

    思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...

  10. node,koa 图片批量添加水印,可手动配置水印位置

    公司设计在处理京东上架商品图片的时候,需要给设计好的图片添加京东的“logo”,并且logo位置得根据图片来摆放,需要通过计算得出logo位置.那样太麻烦了,于是就用node,koa写了批量给图片添加 ...