• [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)
  • 相关阅读:
    OpenCV3 for python3 学习笔记1
    OpenCV3 for python3 学习笔记2
    python3 requests获取某网站折线图上数据
    python BeautifulSoup的简单使用
    Python爬虫之Cookie和Session(转载)
    python 获取前一天或前N天的日期
    python 进程池pool简单使用
    GitHub for Windows简单使用
    Windows上的git、github部署及基本使用方法
    python unknown error: DevToolsActivePort file doesn't exist 问题解决
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8372721.html
Copyright © 2020-2023  润新知