• [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)
  • 相关阅读:
    Dependency property changed example
    业务数据分析
    WPF : 以鼠标指针为中心缩放
    WPF待学习问题列表(未完)
    GirdView前台数据类型转换
    牛人的博客
    使用Xpath对XML进行模糊查询
    XPath语法
    【HDU】3415 Max Sum of MaxKsubsequence
    【HDU】3474 Necklace
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8372721.html
Copyright © 2020-2023  润新知