React使用Ant Design方式(简单使用)_Javascript

react使用ant design方式

在这里介绍一下，这个ant design组件库是与我们的 element 组件是一样的，使用方法大致相似。

antd 是基于 ant design 设计体系的 react ui 组件库，主要用于研发企业级中后台产品。

ant design特性

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 react 组件。
使用 typescript 开发，提供完整的类型定义文件。
全链路开发和设计工具体系。
数十个国际化语言支持。
深入每个细节的主题定制能力。

话不多说，快速上手

我们首先先下载 antd 组件库。

npm install antd --save

以下代码是根据我们的需求来按需引入。

import react from "react";
import reactdom from "react-dom";
import { button, datepicker, version } from "antd";
import "antd/dist/antd.css";
import "./index.css";

reactdom.render(
  <div classname="app">
    <h1>antd version: {version}</h1>
    <datepicker />
    <button type="primary" style={{ marginleft: 8 }}>
      primary button
    </button>
  </div>,
  document.getelementbyid("root")
);

效果图：

来看一下做的一个小案例

我们项目的大致结构：

可以看到有很多的布局方式。

我们选取其中一个，点击<>。

可以展开相应布局的代码。

点击右上角的复制代码，复制到我们的页面中，导入相应的依赖包，然后稍加进行改造。(注意绿色粗体加大的部分的区别)

import react, { component } from 'react';
import table from '../table/table'
import './list.css'

import { layout, menu, breadcrumb } from 'antd';
import { useroutlined, laptopoutlined, notificationoutlined } from '@ant-design/icons';

const { submenu } = menu;
const { header, content, sider } = layout;


class list extends component {
    render() {
        return (
            <div classname="list">

                <layout>
                    <header classname="header">
                        <div classname="logo" />
                        <menu theme="dark" mode="horizontal" defaultselectedkeys={['2']}>
                            <menu.item key="1">nav 1</menu.item>
                            <menu.item key="2">nav 2</menu.item>
                            <menu.item key="3">nav 3</menu.item>
                        </menu>
                    </header>
                    <layout>
                        <sider width={200} classname="site-layout-background">
                            <menu
                                mode="inline"
                                defaultselectedkeys={['1']}
                                defaultopenkeys={['sub1']}
                                style={{ height: '100%', borderright: 0 }}
                            >
                                <submenu key="sub1" icon={<useroutlined />} title="subnav 1">
                                    <menu.item key="1">option1</menu.item>
                                    <menu.item key="2">option2</menu.item>
                                </submenu>
                                <submenu key="sub2" icon={<laptopoutlined />} title="subnav 2">
                                    <menu.item key="5">option5</menu.item>
                                    <menu.item key="6">option6</menu.item>
                                </submenu>
                                <submenu key="sub3" icon={<notificationoutlined />} title="subnav 3">
                                    <menu.item key="9">option9</menu.item>
                                    <menu.item key="10">option10</menu.item>
                                </submenu>
                            </menu>
                        </sider>
                        <layout style={{ padding: '0 24px 24px' }}>
                            <breadcrumb style={{ margin: '16px 0' }}>
                                <breadcrumb.item>home</breadcrumb.item>
                                <breadcrumb.item>list</breadcrumb.item>
                                <breadcrumb.item>app</breadcrumb.item>
                            </breadcrumb>
                            <content
                                classname="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minheight: 280,
                                }}>
                                <table />
                            </content>
                        </layout>
                    </layout>
                </layout>

            </div>
        );
    }
}

export default list;

import react, { component } from 'react';
import {
    table, tag, space, button, message, popconfirm, modal, input, form
} from 'antd';

import { getlist } from '../../api/api'

class tabless extends component {
    state = {
        //获取的数据列表
        list: [],

        // 列表的配置
        columns: [
            {
                title: 'id号',
                dataindex: 'id',
                key: 'id',
            },
            {
                title: 'conmment内容',
                dataindex: 'conmment',
                key: 'conmment',
            },
            {
                title: 'time时间',
                dataindex: 'time',
                key: 'time',
            },
            {
                title: 'done等级',
                key: 'done',
                dataindex: 'done',
                render: done => (
                    <>
                        {done === 0 ? <tag color="magenta">一级</tag> :
                            done === 1 ? <tag color="gold">二级</tag> :
                                <tag color="blue">三级</tag>}
                    </>
                )
            },
            {
                title: 'action操作',
                key: 'action',
                render: (spcord) => (
                    <space size="middle">
                        <button type='primary' size='small' onclick={this.edit_dhk.bind(this, spcord)}>修改</button>
                        {/* 气泡确认框 */}
                        <popconfirm
                            title="你是否真正的要删除这条数据?"
                            onconfirm={this.del.bind(this, spcord.id)}
                            oncancel={this.no_.bind(this)}
                            oktext="yes"
                            canceltext="no"
                        >
                            <button type='danger' size='small' >删除</button>
                        </popconfirm>
                    </space>
                ),
            },
        ],

        // 是否打开添加对话框
        visible: false,

        //定义添加的数据表单
        fromlist: {
            conmment: '',
            done: 0
        },

        //暂时获取修改数据的对象
        edit_from: {},

        //是否打开修改的对话框
        visible1: false
    }

    componentdidmount() {
        this.hqsj()
    }

    //获取数据
    async hqsj() {
        const { data: msg } = await getlist('resu/', 'get')
        console.log(msg.data);
        this.setstate({ list: msg.data })
    }

    //删除数据
    async del(id) {
        const { data: msg } = await getlist('resu/', 'delete', { id: id })
        console.log(msg);
        if (msg.code === 200) {
            message.success('删除成功！')
            this.hqsj()
        }

    }

    //取消删除
    no_() {
        message.warning('取消删除！')
    }

    //打开添加数据对话框
    dhk() {
        this.setstate({ visible: true })
    }

    //添加数据确定按钮
    async hidemodal() {
        const { data: msg } = await getlist('resu/', 'post', this.state.fromlist)
        console.log(msg);
        if (msg.code === 200) {
            message.success('添加成功')
            this.setstate({ visible: false })
            this.hqsj()
        }
    }

    //添加数据取消按钮 关闭对话框
    hidemodelout() {
        message.warning('取消此操作！')
        this.setstate({ visible: false })
        this.setstate({ visible1: false })
    }

    //监测表单添加时 赋值给state
    ch(n, e) {
        if (n === 'conmment') {
            var fromlist1 = this.state.fromlist
            fromlist1.conmment = e.target.value
            this.setstate({ fromlist: fromlist1 })
        } else {
            var fromlist1 = this.state.fromlist
            fromlist1.done = e.target.value
            this.setstate({ fromlist: fromlist1 })
        }
    }

    //点击修改按钮 打开对话框
    edit_dhk(item) {
        console.log(item);
        this.setstate({ edit_from: item })
        this.state.visible1 = true
    }

    ch2(n, e) {
        if (n === 'conmment') {
            var edit_from1 = this.state.edit_from
            edit_from1.conmment = e.target.value
            this.setstate({ edit_from: edit_from1 })
        } else {
            var edit_from1 = this.state.edit_from
            edit_from1.done = e.target.value
            this.setstate({ edit_from: edit_from1 })
        }
    }

    //提交修改请求
    async edit_ok() {
        const { data: msg } = await getlist('resu/', 'post', this.state.edit_from)
        if (msg.code === 200) {
            message.success('修改成功！')
            this.state.visible1 = false
            this.hqsj()
        }
    }

    render() {
        return (
            <div>
                <button type='primary' style={{ margin: "20px 0" }} onclick={this.dhk.bind(this)}>添加数据</button>
                {/* 数据表格 */}
                <table columns={this.state.columns} datasource={this.state.list} rowkey={rec => rec.id} />

                {/* 添加数据对话框 */}
                <modal
                    title="添加数据"
                    // 根据状态是否显示对话框
                    visible={this.state.visible}

                    onok={this.hidemodal.bind(this)}
                    oncancel={this.hidemodelout.bind(this)}
                    oktext="确认"
                    canceltext="取消"
                >

                    {/* 表单 */}
                    <form
                        name="basic"
                        labelcol={{ span: 8 }}
                        wrappercol={{ span: 16 }}
                        style={{ paddingright: "87px", boxsizing: "border-box" }}
                    >
                        <form.item label="conmment" >
                            <input placeholder="请输入主要内容" onchange={this.ch.bind(this, 'conmment')} />
                        </form.item>
                        <form.item label="done" >
                            <input placeholder="请输入等级(0:等级一,1：等级二,2：等级三)" onchange={this.ch.bind(this, 'done')} />
                        </form.item>
                    </form>



                </modal>

                {/* 修改数据的对话框 */}
                <modal
                    title="添加数据"
                    // 根据状态是否显示对话框
                    visible={this.state.visible1}

                    onok={this.edit_ok.bind(this)}
                    oncancel={this.hidemodelout.bind(this)}
                    oktext="确认"
                    canceltext="取消"
                >

                    {/* 表单 */}
                    <form
                        name="basic"
                        labelcol={{ span: 8 }}
                        wrappercol={{ span: 16 }}
                        style={{ paddingright: "87px", boxsizing: "border-box" }}
                        initialvalues={this.state.edit_from}
                    >
                        <form.item label="conmment" name='conmment'>
                            <input placeholder="请输入主要内容" onchange={this.ch2.bind(this, 'conmment')} />
                        </form.item>
                        <form.item label="done" name='done'>
                            <input placeholder="请输入等级(0:等级一,1：等级二,2：等级三)" onchange={this.ch2.bind(this, 'done')} />
                        </form.item>
                    </form>


                </modal>


            </div>
        );
    }
}

export default tabless;

然后启动我们的项目：