[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" ...
随机推荐
- NodeJS踩坑实录
nodejs的常用api url 主要是配置一系列和路径相关的信息 url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 将一个U ...
- mysql linux查看配置文件my.cnf位置
原文:mysql linux查看配置文件my.cnf位置 命令: mysql --help | grep 'Default options' -A 1
- Mysql学习总结(31)——MySql使用建议,尽量避免这些问题
做服务器端开发的同学们,相信对于mysql应该是十分熟悉,但是一旦真正出现问题,你是否能够快速的发现问题的起因,并且解决呢?一旦问题涉及到数据库层面,往往不是那么好解决的,通常来说,我们需要提前做应对 ...
- java应届生面试考点收集
回 到 顶 部 这些知识点来自于之前去百度实习.阿里.蘑菇街校园招聘的电话面试 未完待续 JavaSE 面向对象 封装.继承.多态(包括重载.重写) 常见区别 String.StringBuffer. ...
- [AngularJS]Chapter 5 与服务器交互
第八章有关于缓存的东西. [通过$http交互] 传统的AJAX请求如下 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange ...
- Linux下基于多线程的echo
准备开始写一些Linux 下网络编程以及多线程的blog,就从这个简单的echo程序开始吧. 在echo的服务端使用多线程与客户进行通信,可以实现一个服务端程序同时连接多个客户的功能.那么,到底在服务 ...
- csdn第五届在线编程大赛-全然平方
题目详情 给定整数区间[A,B]问当中有多少个全然平方数. 输入格式: 多组数据,包括两个正整数A,B 1<=A<=B<=2000000000. 输出格式: 每组数据输出一行包括一个 ...
- 实践补充 Installing Tomcat 7.0.x on OS X
我的 Mac 下是1.6的 SDK,下载 Tomcat 8.0 执行后,訪问 http://127.0.0.1:8080 并无反应,并且关闭脚本会报错 : Unsupported major.mino ...
- 开心的小明(南阳oj49)(01背包)
开心的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 小明今天非常开心.家里购置的新房就要领钥匙了,新房里有一间他自己专用的非常宽敞的房间.更让他高兴的是,妈妈 ...
- Visual C++文件后缀名释义
[1] .APS:存放二进制资源的资源辅助中间文件(可加快资源装载速度). [2] .BMP:位图资源文件. [3] .BSC:浏览信息文件.由浏览信息维护工具(BSCMAKE)从原始浏览信息文件(. ...