会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 118818个问题
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 1楼
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 2楼
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 3楼
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 5楼
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 6楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目 8楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目 9楼

import React, { Component } from 'react'

import {Button,Card,Table,Space} from 'antd'

import { PlusOutlined } from '@ant-design/icons'

import { Panel } from '../../../components'

import { connect } from 'react-redux'

import ModalFrom from './ModalForm'




class Menu extends Component {

  constructor(props){

    super(props);

    this.state = {

      dataSource:[]

    }

  }



  onGetlist=()=>{

    global.service.get('/api/menu/list').then(data=>{

      console.log(data);

      this.setState({dataSource:data.records})

    })

  }


  componentDidMount(){

    this.onGetlist()

  }


  onAdd=(record) =>{

    //打开弹窗

    return ()=>{

      this.props.dispatch({

            type:'showModalForm',

            data:{

              title:'新增', //弹窗标题

              data:record?{name:record.name,pid:record.id}:{},//表单数据

              refreshList:this.onGetlist

            }

          })

    }

   

  }


  getTableProps = () =>{

    return {

      colums:[

        {

          title:'菜单',

          dataIndex:'name',

        },

        {

          title:'访问地址',

          dataIndex:'linkUrl',

        },

        {

          title:'操作',

          render:(record) =>(

            <Space>

              <a>查看</a>

              <a>编辑</a>

              <a>删除</a>

              <a onClick={this.onAdd}>新增</a>

            </Space>

          )

        }

      ],

      dataSource:this.state.dataSource||[],

      rowKey:'id',

      pagination:false

    }

  }



  render() {

    const {modalFrom} = this.props.menuState;

    return (

        <Panel title='菜单管理'>

            <div className='m-operate'>

            <Button type='primary' icon={<PlusOutlined/>} onClick={this.onAdd()}>新增</Button>

        </div>

        <Card>

            {/* 列表组件 */}

            <Table {...this.getTableProps()}/>

        </Card>

        {modalFrom&&<ModalFrom {...modalFrom} {...this.props}/>}

        </Panel>

       

    )

  }

}



const mapStateToProps = (store) =>({menuState:store.menu})

const mapDispatchToProps = (dispatch) =>({dispatch})


export default connect(mapStateToProps,mapDispatchToProps)(Menu)





WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 10楼
WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 11楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目 12楼

reactshizhan.zip

帮忙看看我这个,点了新增按钮无法改变store的值,好像是组件没有和stroe关联起来

WEB前端全系列/第十六阶段:React企业级项目/企业级后台管理系统 13楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目 15楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2023 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2020212637