[MST] Create an Entry Form to Add Models to the State Tree
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的更多相关文章
- 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 ...
- SharePoint自动化系列——Create a local user and add to SharePoint
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 实现过程:在本地创建一个local user并将该user添加到Administrators组中, ...
- Mongodb之failed to create service entry worker thread
Mongodb "failed to create service entry worker thread" 错误. 系统:CentOS release 6.8 mongod.lo ...
- 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 ...
- 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 ...
- create index 与 alter table add index 区别
众所周知,MySQL创建索引有两种语法,即:ALTER TABLE HeadOfState ADD INDEX (LastName, FirstName);CREATE INDEX index_nam ...
- [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 ...
- how to create a custom form for sharepoint list
在VS中创建一个applicationPage映射到Layouts文件夹下,然后代码如下: SPList lstTest = web.Lists["Shared Documents" ...
- python---django中form组件(1)简单使用和字段了解
Django中的Form组件功能: 1.对用户请求的验证 2.生成html代码 Form使用:对用户请求进行验证 前端代码: <form action="/f1.html" ...
随机推荐
- Redis字符串(STRING)中BIT相关命令
上篇文章我们对STRING数据类型中一些基本的命令进行了介绍,但是没有涉及到BIT相关的命令,本文我们就来看看几个和BIT相关的命令. 本文是Redis系列的第四篇文章,了解前面的文章有助于更好的理解 ...
- W10如何开启LinuxBash及安装Ubuntu
W10如何开启LinuxBash的功能 1)开启开发人员模式 2)启动部分windows功能 完成后重启系统 然后在cmd中输入bash按命令操作即可使用bash命令 3)下载安装ubuntu lxr ...
- CodeForces 362E Petya and Pipes
Petya and Pipes Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces. ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- 推断CPU 是小端存储(Little endian)还是大端存储(Big endian)模式
第一个版本号: //return true in big-endian machines bool check_big_endian1() { int a = 0; int *p = &a; ...
- iOS知识点汇总
1.怎样追踪app崩溃率.怎样解决线上闪退 当iOS设备上的App应用闪退时.操作系统会生成一个crash日志.保存在设备上.crash日志上有非常多实用的信息,比方每个正在运行线程的完整堆栈跟踪信息 ...
- leetCode 72.Edit Distance (编辑距离) 解题思路和方法
Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert ...
- VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法
VC MFC 提供的 API LoadBitmap / LoadImage 类 CBitmap 等都只能操作 BMP 位图,图标.对于其他常用的 JPG / JPEG / GIF / PNG 格式,它 ...
- 关于webuploader跨域解决方法
1.在iis处理程序映射 2.后台ashx处理添加如下代码
- JS高级之简单类的定义和继承
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...