React third-party component 6 (use of Mobx for state management ②TodoList)

React third-party component 6 (use of Mobx for state management ②TodoList)

This tutorial has a total of 5 articles, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1. React third-party components 6 (the use of Mobx for state management①simple use) ---2018.03.28

2. React third-party component 6 (Use of Mobx for state management ②TodoList) ---2018.03.29

3. React third-party component 6 (use of Mobx for state management ③TodoList) ---2018.03.30

4. React third-party component 6 (use of Mobx for state management ④under TodoList) ---2018.04.02

5. React third-party components 6 (use of Mobx for state management ⑤ asynchronous operation) ---2018.04.03

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

1. We copy a copy of mobx1 to mobx2, and add a route in Index.jsx under mobx

2. Modify the Index.jsx file under mobx2

import React from'react';
import {useStrict} from'mobx';
import {observer} from'mobx-react';
import State from'./State'

useStrict(true);
const newState = new State();

@observer
class Index extends React.Component {
    render() {
        return (
            <div>
                <input type="text" ref="todoInput"/>
                <button onClick={() => newState.add(this.refs['todoInput'].value)}>Add</button>
                {
                    newState.list.map(data => <li key={data.id}>{data.title}</li>)
                }
            </div>
        )
    }
}

export default Index

3. Modify State.js

import {observable, action} from'mobx';

class State {
    @observable list = [];
    @action add = (title) => {
        if (title) {
            this.list.push({id: this.list.length + 1, title: title, status: 1});
        } else {
            alrt('cannot be empty')
        }
    };
}

export default State

4. Check the browser effect

Reference: https://cloud.tencent.com/developer/article/1092705 React third-party component 6 (use of Mobx for state management ②TodoList)-Cloud + Community-Tencent Cloud