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

简介: [React] 实现点击Button将文件名赋值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>
    )
}

这样赋值就完成了,此方法是最简单的,如果项目文件支持你这么使用的话

如果不支持你使用此方法的话,那请详看下面的方法~

相关文章
|
1月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
28 1
|
25天前
|
前端开发 索引
react怎么做到点击传参
react怎么做到点击传参
17 0
|
1月前
|
缓存 前端开发 JavaScript
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。
|
1月前
|
前端开发
react onChange怎么赋值
在 React 中,可以通过使用 onChange 事件来监听表单元素的变化,并进行赋值操作。
|
1月前
|
前端开发
react获取input的value值
react获取input的value值
65 0
|
7月前
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
136 0
|
7月前
|
前端开发
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
69 0
|
7月前
|
前端开发
react获取input值
react获取input值
|
10月前
|
前端开发
【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能
【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能
61 0
|
10月前
|
前端开发
react关于点击一个复选框全部选中的解决方法
react关于点击一个复选框全部选中的解决方法
63 0