[MST] Build Forms with React to Edit mobx-state-tree Models
2018-01-28 02:21
435 查看
We will expand our UI, and give the user the possibility to edit his wishlist. We will use the earlier defined actions. We also will use model clones only to modify data temporarily, and after approving the changes, apply them back to the original model.
In this lesson you will learn:
How to call model actions from a component
Using
Using
The whole point for building a editing form component is that:
1. avoid two ways data flow, means that you change the data inside the form, without saving but the data was mutated already. To solve this problem, we will use 'clone' from 'mobx-state-tree'.
2. When save the data, we can use 'getSnapshot' and 'applySnapshot' from the lib.
Here we have to use the methods provide from the lib, because the 'this.props.item' is a mobx state model object:
The good part of this approach is that, the model related data can be handled by the mobx-state-tree lib. It can helps to udpate the model efficiently.
The down side of the approach is that, you needs to keep at least tow parts of state, one is mobx-state-tree, another one is the component state, for example, in the code, 'isEiditing' & 'clone'.
In this lesson you will learn:
How to call model actions from a component
Using
cloneto create a full, deep clone of any model instance
Using
applySnapshotto update the state of a model instance given a snapshot.
The whole point for building a editing form component is that:
1. avoid two ways data flow, means that you change the data inside the form, without saving but the data was mutated already. To solve this problem, we will use 'clone' from 'mobx-state-tree'.
2. When save the data, we can use 'getSnapshot' and 'applySnapshot' from the lib.
import React, {Component} from "react" import {observer} from "mobx-react"; import {clone, getSnapshot, applySnapshot} from 'mobx-state-tree'; import WishListItemEdit from "./WishListItemEdit" class WishListItemView extends Component { constructor() { super(); this.state = {isEditing: false} } render() { const {item} = this.props; return this.state.isEditing ? this.renderEditable() : this.renderItemView(item); } renderEditable() { return ( <li className="item"> <WishListItemEdit item={this.state.clone}/> <button onClick={this.onSaveEdit}>💾</button> <button onClick={this.onCancelEdit}>❎</button> </li> ); } renderItemView(item) { return ( <li className="item"> {item.image && <img src={item.image}/>} <h3>{item.name}</h3> <span>{item.price}</span> <span> <button onClick={this.onToggleEdit}>✏</button> </span> </li> ); } onSaveEdit = () => { applySnapshot(this.props.item, getSnapshot(this.state.clone)) this.setState({ isEditing: false, clone: null }) }; onCancelEdit = () => { this.setState({isEditing: false}) }; onToggleEdit = () => { this.setState({ isEditing: true, clone: clone(this.props.item) }) } } export default observer(WishListItemView)
Here we have to use the methods provide from the lib, because the 'this.props.item' is a mobx state model object:
{$mobx: ObservableObjectAdministration, toString: ƒ, …}
The good part of this approach is that, the model related data can be handled by the mobx-state-tree lib. It can helps to udpate the model efficiently.
The down side of the approach is that, you needs to keep at least tow parts of state, one is mobx-state-tree, another one is the component state, for example, in the code, 'isEiditing' & 'clone'.
相关文章推荐
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [MST] Attach Behavior to mobx-state-tree Models Using Actions
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
- [Poi] Customize Babel to Build a React App with Poi
- [Mobx] Using mobx to isolate a React component state
- [MST] Create an Entry Form to Add Models to the State Tree
- PCL( I currently use CDT with cmake to build a Point Cloud Library (PCL) project.)
- Using Android Studio to build applications with NDK and Boost C++ libraries
- webpack打包遇到locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration
- Installing the PostgreSQL gem with 'gem pq' fails with ERROR: Failed to build gem native extension
- Udemy - Build Apps with React Native
- React Native Trying to resolve view with tag 518 which doesno't
- Preparing to build session factory with filters : {}
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- 项目管理实践【五】自动编译和发布网站【Using Visual Studio with Source Control System to build and publish website automatically】
- Java Secret: Using an enum to build a State machine(Java秘术:用枚举构建一个状态机)
- pod install后出现: [!] `<PBXResourcesBuildPhase UUID=`x`>` attempted to initialize an object with an...
- How to Build An Action and Emotion Database for Simulated Driver’s State Recognition
- How to edit Sublime Text build settings?
- React依赖注入说明(mapStateToProps/mapDispatchToProps)