[MST] Create an Entry Form to Add Models to the State Tree
to The an create Tree Form add State
2023-09-14 08:59:17 时间
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)
相关文章
- SqlBulkCopy – The given value of type String from the data source cannot be converted to type
- although the false banknotes_to unleash this cpu full power
- ORA-01326: compatability of 9.0 or greater required to build into the logstream ORACLE 报错 故障修复 远程处理
- ORA-26854: STREAMS string has no enqueue or dequeue privileges to the queue. ORACLE 报错 故障修复 远程处理
- ORA-26898: Unable to create “string” because there is an Oracle Capture process using the same queue “string”.”string”. ORACLE 报错 故障修复 远程处理
- ORA-26901: string propagation sender in the combined capture and apply mode is to be suspended while apply is disabled. ORACLE 报错 故障修复 远程处理
- ORA-27611: Smart I/O failed due to a block corruption detected on the host. The block was received from cell “string”. disk: “string”, block: “string”, disk offset: “string” ORACLE 报错 故障修复 远程处理
- ORA-27613: Smart I/O failed due to an I/O error on the cell “string”. disk: “string”, block: “string”, disk offset: “string” I/O size: “string” ORACLE 报错 故障修复 远程处理
- ORA-29381: plan/consumer_group string referred to by another plan and cannot be deleted ORACLE 报错 故障修复 远程处理
- ORA-30158: The OCIFileWrite causes the file to exceed the maximum allowed size ORACLE 报错 故障修复 远程处理
- ORA-32342: The EXPLAIN_MVIEW facility failed to explain the materialized view statement ORACLE 报错 故障修复 远程处理
- ORA-39804: The load was aborted due to an error loading parent string while also loading child string. ORACLE 报错 故障修复 远程处理
- ORA-41301: failed to write data to file ORACLE 报错 故障修复 远程处理
- ORA-48131: error encountered when attempting to tell the file position ORACLE 报错 故障修复 远程处理
- ORA-48464: The predicate buffer reached the maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-53035: The rows for the mapping document (string) do not exist. ORACLE 报错 故障修复 远程处理
- ORA-53410: The attribute string does not conform to the VM rule. ORACLE 报错 故障修复 远程处理
- ORA-55479: a policy already assigned to the RDF model ORACLE 报错 故障修复 远程处理
- ORA-56729: Failed to bind the database instance to processor group string ORACLE 报错 故障修复 远程处理
- ORA-00391: All threads must switch to new log format at the same time ORACLE 报错 故障修复 远程处理
- ORA-01417: a table may be outer joined to at most one other table ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-011772; Symbol: ER_LDAP_AUTH_FAILED_TO_GET_CONNECTION_AS_PLUGIN_NOT_READY; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-16030: session specific change to the LOG_ARCHIVE_MIN_SUCCEED_DEST parameter requires a LOG_ARCHIVE_DEST_n destination ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-013759; Symbol: ER_GRP_RPL_ADD_VIEW_CHANGE_UUID_TO_GRP_SID_MAP_ERROR; SQLSTATE: HY000 报错 故障修复 远程处理
- ECC TO HANA FAGLB03 search-help on Account Number field doesn’t working or not returning the selected value to the Account Number field.详解编程语言
- the cloudTaking Oracle to the Cloud: The Evolution of Database Systems(oracleisin)
- Unlocking the Power of Redis: A Comprehensive Guide to Maximizing Your Data Storage Potential(keysredis)
- Unlocking the Power of Oracle 11: Your Ultimate Guide to a Successful Database Management(oracle11个)
- Exploring the Stack: An Introduction to Viewing Stacks on Linux(linux查看栈)
- 尝试攻克決勝難關The A to Z of Redis(the a什么redis)