[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" ...
随机推荐
- Vue 做项目经验
Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...
- ASP.NET-EF基础知识
定义 asp.net Entity Framework是微软以ADO.NET为基础发展出来的对象关系对应(OR Mapping)解决方案. 三种EF工作模式(自己理解的) 从数据库表创建类 从类创 ...
- HDU 4311 Contest 2
求的是曼哈顿距离.可以把X,Y的距离分开来求.其中,求X.Y的距离可以通过排序后递推的方式求出值的. #include <iostream> #include <algorithm& ...
- mysql的查询练习1
1.多表查询
- extjs 时间范围选择的实现
extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下 效果图: watermark/2/text/aHR0cDov ...
- 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_ ...
- cximage功能简介
CxImage是一个可以用于MFC 的C++图像处理类库类,它可以打开,保存,显示,转换各种常见格式的图像文件,比如BMP, JPEG, GIF, PNG, TIFF, MNG, ICO, PCX, ...
- xBIM 高级02 插入复制功能
系列目录 [已更新最新开发文章,点击查看详细] IFC 模型中的合并和删除实体是一个非常重要的任务,因为 IFC 不是一个分层结构.它是一个复杂的结构,具有潜在的循环关系,是一个双向导航.在单 ...
- BZOJ 2844 高斯消元 线性基
思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...
- node,koa 图片批量添加水印,可手动配置水印位置
公司设计在处理京东上架商品图片的时候,需要给设计好的图片添加京东的“logo”,并且logo位置得根据图片来摆放,需要通过计算得出logo位置.那样太麻烦了,于是就用node,koa写了批量给图片添加 ...