封装dialog_React+Element封装Dialog组件

之前写过一个react项目，一共就几个页面，但是几乎每个页面都有Modal组件（之前是用AntD），而且大多数的功能都很相似，所以想了一下应该开始封装这种类型的组件了。

然后今天花了一点时间做了一个小demo。

注意

这里用到的是React+Element，需要注意的是用create-react-app创建的项目react-hot-loader版本与Element版本好像有冲突，具体原因我还没搞清楚，解决的办法是重装一个react-hot-loader，我这里的版本上是4.11.1。

npm i react-hot-loader@4.11.1

ok，进入正题。

现在要做的是能往一个组件里不断添加数据的Dialog的封装。

首先我们创建一个展示数据的组件。

import React, { useState } from 'react'
import { Button } from 'element-react'

function DemoList () {
    const [data, setData] = useState([])

    return (
        <div>
            {
                data.map(item => (
                    <li key={item.id} style={{ width: '100px', height: '50px', textAlign: 'center' }}>
                        {item.name}
                    </li>
                ))
            }
            <Button>添加新节点</Button>
        </div>
    )
}

export default DemoList;

然后我们再创建一个Dialog的组件，我们大概可以清楚，这个组件需要几个参数。

• visi：控制这个dialog的显示
• can：用户点击取消，调用回调函数关闭当前的Dialog
• add：用户点击确定，调用回调函数并传入用户输入的name

import React, { useState } from 'react'
import { Dialog, Button, Input } from 'element-react'

function AddDialog ({ visi, can, add }) {
    const [name, setName] = useState('')
    return (
        <div>
            <Dialog
                visible={visi}
                onCancel={() => {
                    can()
                }}
            >
                <Dialog.Body>
                    <Input value={name} onChange={e => {setName(e)}} placeholder="请输入名字" />
                </Dialog.Body>
                <Dialog.Footer>
                    <Button onClick={() => {
                        add(name)
                    }}>确定</Button>
                    <Button onClick={() => {
                        can()
                    }}>取消</Button>
                </Dialog.Footer>
            </Dialog>
        </div>
    )
}

export default AddDialog;

ok，准备好这个组件之后我们就要返回DemoList组件写回调函数了。

import React, { useState } from 'react'
import { Button } from 'element-react'
// 这里记得引入组件
import AddDialog from './AddDialog'

function DemoList () {
    const [data, setData] = useState([])
    // 设置一个变量控制Dialog的显示
    const [visible, setVisible] = useState(false)
    // 加入用户输入的数据
    const addData = (name) => {
        const query = {
            id: data.length,
            name: name
        }
        setData([...data, query])
    }
    const cancel = () => {
        setVisible(false)
    }

    return (
        <div>
            {
                data.map(item => (
                    <li key={item.id} style={{ width: '100px', height: '50px', textAlign: 'center' }}>
                        {item.name}
                    </li>
                ))
            }
            // 当点击时显示Dialog
            <Button onClick={() => {setVisible(true)}}>添加新节点</Button>
            // 在这里调用组件
            <AddDialog
                visi={visible}
                add={name => {
                    addData(name)
                    cancel()
                }}
                cal={() => {cancel()}}
            />
        </div>
    )
}

export default DemoList;

这样，就可以进行添加数据了，但是有一个小问题，就是每次添加或取消之后，用户之前输入的那个数据还在，所以我们应该清除掉。

import React, { useState } from 'react'
import { Dialog, Button, Input } from 'element-react'

function AddDialog ({ visi, can, add }) {
    const [name, setName] = useState('')
    // 在这里添加个清除的方法
    cosnt clear = () => {
        setName('')
    }
    return (
        <div>
            <Dialog
                visible={visi}
                onCancel={() => {
                    can()
                    clear()
                }}
            >
                <Dialog.Body>
                    <Input value={name} onChange={e => {setName(e)}} placeholder="请输入名字" />
                </Dialog.Body>
                <Dialog.Footer>
                    <Button onClick={() => {
                        add(name)
                        clear()
                    }}>确定</Button>
                    <Button onClick={() => {
                        can()
                        clear()
                    }}>取消</Button>
                </Dialog.Footer>
            </Dialog>
        </div>
    )
}

export default AddDialog;

这样，这个Dialog组件就封装好了，并且还能在其他组件调用，再也不用ctrl + c， ctrl + v了，而且维护起来也更方便了，当然其他的Dialog都可以这么封装，都是一样的原理。

最后，想说一下，不要像我一样这么烂的变量名（手动掩面，我太着急了点，见谅，我只是个菜鸡）

总结完毕，撒花，睡觉~