React第三方组件6(状态管理之Mobx的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件6(状态管理之Mobx的使用①简单使用)---2018.03.28

2、React第三方组件6(状态管理之Mobx的使用②TodoList上)---2018.03.29

3、React第三方组件6(状态管理之Mobx的使用③TodoList中)---2018.03.30

4、React第三方组件6(状态管理之Mobx的使用④TodoList下)---2018.04.02

5、React第三方组件6(状态管理之Mobx的使用⑤异步操作)---2018.04.03

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

1、我们复制一份mobx2到mobx3中,并在mobx下Index.jsx中加上路由

2、修改Index.jsx

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 className="todoList">
                <input type="text" ref="todoInput"/>
                <button onClick={() => newState.add(this.refs['todoInput'].value)}>添加</button>
                {
                    newState.list.map(data =>
                        <li key={data.id}>
                            {data.title}
                            <button
                                onClick={() => newState.edit({
                                    id: data.id,
                                    status: data.status === 1 ? 0 : 1
                                })}
                                className={data.status === 1 ? "del" : "recovery"}>
                                {data.status === 1 ? "删除" : "恢复"}
                            </button>
                        </li>
                    )
                }
            </div>
        )
    }
}

export default Index

3、修改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 {
            alert('不能为空')
        }
    };
    @action edit = (obj) => {
        let {id, status} = obj;
        this.list.find(data => data.id === id).status = status;
    }
}

export default State

4、查看浏览器效果

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-03-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞扬的花生

Bootstrap学习------按钮

      Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子,以后也许用的到。 效果如下  ? 代码如下 <!DOCTYPE html> <h...

204100
来自专栏数据小魔方

动态图表8|组合框(offset函数)

今天跟大家分享动态图表8——组合框(offset函数)! 步骤: 使用组合框制作下拉菜单 使用offset函数制作动态数据源 利用动态数据源制作图表 1、组合框...

39960
来自专栏流浪猫的golang

go的入门之路 http Get Post请求

   defer 关键字是总会执行,类似于java try catch finally 代码块

11950
来自专栏移动开发之家

Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

1.2K30
来自专栏从零开始学自动化测试

selenium+python自动化86-循环点击遇到的坑

# 前言 selenium定位一组元素,批量操作循环点击的时候会报错:Element not found in the cache - perhaps the ...

86640
来自专栏我的博客

安卓开发之应用资源

一、安卓应用源代码分类:界面布局文件、Java源文件、资源文件 二、应用资源文件分类 一类是无法直接访问的资源,保存在assets目录下;另外一类是可以用R资源...

37280
来自专栏章鱼的慢慢技术路

Direct3D 11 Tutorial 1: Basics_Direct3D 11 教程1:基础

在这第一篇教程中,我们将通过介绍创建最小Direct3D应用程序所必需的元素。每一个Direct3D应用程序必需拥有这些元素才能正常地工作。这些元素包括设置窗口...

14210
来自专栏owent

C++的backtrace

很多语言的log模块都有一个功能,就是在打log的时候能够追溯调用栈,有的时候对查bug能有点帮助。之前我也想过给我们的log模块加上C++的backtrace...

82130
来自专栏从零开始学 Web 前端

JavaScript基础(一)概述

ECMAScript(前身为欧洲计算机制造商协会):JavaScript的语法规范

12830
来自专栏木子墨的前端日常

react-navigation 使用笔记 持续更新中

React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记

13340

扫码关注云+社区

领取腾讯云代金券