[React] 实现点击Button将文件名赋值Input

目标: 选择文件赋值到Input输入框不会带有下级目录文件

我自己遇到的问题

问题: 
找个一个办法能够解决自定义组件选择文件夹的问题，当时我还想把字符串根据/切割为数组，根据 .xx判断然后删除 带.的一组或者多组
后来发现这种只对单层文件夹有用，如果是多层文件夹他还是会继续找下去
当时我使用的是Antd-Design的Upload组件坚挺的Change

第一种方法

使用electron

框架	介绍
electron	Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。

---

这种方法可以直接使用electron内置的API， 打开文件会话框，监听用户的上传以及取消，来赋值到Input的输入框，当然这也是最简单的一种办法，一般在不使用electron构建桌面应用端的公司是不会使用的。

解决：

解决方法: 
electron ipcRenderer 模块
const { ipcRenderer } = window.require('electron')

其中第一个参数: canceled是用来监听操作者对于文件上传框的选择文件或者取消的
第二个参数: filePaths是你选中的文件组成的数组
它返回的格式是这样的: filePath: {canceled: false/true, filePath:['C:\\Desktop']}

'open-dialog'为《文件对话框》
const filePath = ipcRenderer.sendSync('open-dialog') 

我的使用方法：

const { ipcRenderer } = window.require('electron')

const VLocation = ({
    value = '', onChange, title, placeholder, show
}) => {
    const changeValue = (val) => {
        onChange(val)
    }
    const selectLocationChange = () => { // 主要看这个方法
        const filePath = ipcRenderer.sendSync('open-dialog')
        changeValue(filePath.filePaths[0])
    }

    return (
        <VLocationContainer>
            { show && (
                <Input
                    value={value}
                    className="select-localtion"
                    placeholder={placeholder}
                    disabled
                    allowClear
                />
            ) }
            <Button onClick={() => selectLocationChange()}>{title}</Button>
        </VLocationContainer>
    )
}

这样赋值就完成了，此方法是最简单的，如果项目文件支持你这么使用的话
如果不支持你使用此方法的话，那请详看下面的方法~