正文
[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)
