React + mobx 创建表格并操作数据

Mobx 快速入门

安装依赖项: mobx, mobx-react

npm i mobx mobx-react

定义observable, observer 和 action

1。 定义一个状态对象, 它具有可观察的属性, 我们将它称为 observable，将状态对象传递给 mobx observable()

import {observable} from 'mobx';

let tableState = observable({
    Head: [
        {header: 'Name'},
        {header: 'Job1'},
        {header: 'operation'}
    ],
    Body: [
        {
            name: '李狗蛋',
            job: '程序猿',
            operation: '删除'
        },
        {
            name: '王翠花',
            job: '攻城狮',
            operation: '删除'
        },
        {
            name: '二狗子',
            job: '加班狗',
            operation: '删除'
        }
    ]
});

2。创建一个react组件, 它能够响应 observable 的变化, 我们将它称为 observer

使用 mobx-react observer() 来包裹它.

let Table2 = observer(({tableState}) => {
    return (
        <table className='myTable'>
            <TableHead Head={tableState.Head}/>
            <TableBody Body={tableState.Body}/>
        </table>
    );
})

3。定义更改状态的函数, 我们将它称为 action，

删除表格中的一行。

tableState.removeTr = action((index)=> {
    const Body1 = tableState.Body;
    tableState.Body = Body1.filter((item,position) => {
        return position !== index
    })
})

完整代码：

import React, {Component} from 'react';
import {action, observable} from "mobx";
import {observer} from "mobx-react";

// 定义一个状态对象，它具有可观察的属性，称之为observable
let tableState = observable({
    Head: [
        {header: 'Name'},
        {header: 'Job1'},
        {header: 'operation'}
    ],
    Body: [
        {
            name: '李狗蛋',
            job: '程序猿',
            operation: '删除'
        },
        {
            name: '王翠花',
            job: '攻城狮',
            operation: '删除'
        },
        {
            name: '二狗子',
            job: '加班狗',
            operation: '删除'
        }
    ]
});

const TableHead = (props) => {
    const myHead = props.Head.map((item,index) => {
        return <th key={index}>{item.header}</th>
    });
    return (
        <thead  style={{border:'1px solid blue'}}>
        <tr>{myHead}</tr>
        </thead>
    );
}

const TableBody = (props) => {
    const myBody = props.Body.map((item,index) => {
        return <tr key={index}>
            <td>{item.name}</td>
            <td>{item.job}</td>
            <td><button onClick={() =>tableState.removeTr(index)}>{item.operation}</button></td>
        </tr>
    });
    return (
        <tbody>{myBody}</tbody>
    );
}

//创建一个React组件，将其转化为响应observable的组件
let Table2 = observer(({tableState}) => {
    return (
        <table className='myTable'>
            <TableHead Head={tableState.Head}/>
            <TableBody Body={tableState.Body}/>
        </table>
    );
})

//定义更改状态的函数，称之为action，更改observable
tableState.removeTr = action((index)=> {
    const Body1 = tableState.Body;
    tableState.Body = Body1.filter((item,position) => {
        return position !== index
    })
})

// 每隔1秒钟增加一行
// let count =0;
// setInterval(action(()=> {
//     tableState.Body = [...tableState.Body, tableState.Body[count]];
//     count++;
// }), 1000);

class TableMobx extends Component {
    render() {
        return (
            <Table2 tableState={tableState}/>
        );
    }
}

export default  TableMobx;