[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>
    )
}

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

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

相关文章
|
7天前
|
前端开发 JavaScript 开发者
React 按钮组件 Button
本文介绍了 React 中按钮组件的基础概念,包括基本的 `&lt;button&gt;` 元素和自定义组件。详细探讨了事件处理、参数传递、状态管理、样式设置和可访问性优化等常见问题及其解决方案,并提供了代码示例。帮助开发者避免易错点,提升按钮组件的使用体验。
114 77
|
18天前
|
前端开发 开发者
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
63 32
|
21天前
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
33 4
|
3月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
127 1
React项目input输入框输入自动失去焦点
|
3月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
48 1
react动态生成input、select标签以及思路总结
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
React实现添加多行输入框(点击一行增加一行)
React中实现点击按钮动态添加多行输入框,通过维护一个状态数组并在每次点击时更新数组来控制输入框的增加,每行输入框对应数组中的一个对象。
92 1
|
4月前
|
前端开发 JavaScript 数据可视化
使用React的函数式组件实现一个具有过渡变化、刻度切换、点击高亮的柱状图DIY组件
本文展示了如何使用React的函数式组件实现一个具有过渡变化、刻度切换、点击高亮效果的自定义柱状图组件,并提供了完整的示例代码和实现效果。
73 1
|
3月前
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
116 5
|
5月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
188 1
|
7月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
72 1