hooks组件封装 react_「React组件封装」「实例」文件选择按钮组件封装

最新推荐文章于 2025-05-14 07:23:59 发布

weixin_39987120

最新推荐文章于 2025-05-14 07:23:59 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

文章标签： hooks组件封装 react

本文链接：https://blog.csdn.net/weixin_39987120/article/details/111635310

本文介绍了一个文件选择器组件的封装实现，该组件模仿普通按钮的行为，并支持多种文件类型的选取。文章提供了两种不同的实现方式，一种是基于React的基础版本，另一种则是基于Material-UI Button组件的封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件选择器是我们经常会使用到的，一般都是通过点击某个按钮然后选取文件。

所以封装一个文件选择按钮还是有必要的。

首先，这个按钮使用起来必须和普通按钮一模一样，否则就失去了封装的意义。

其次也要基本符合我[基础]中讲到的几点。

于是(注意在chrome中使用image/*会很慢)：(基础版本)

import React, { PureComponent } from 'react';import CSSModules from 'react-css-modules'; import Tools from '../../common_js/Tools' import styles from './FileButton.css' class FileButton extends PureComponent { constructor(props) { super(props);  this.getFiles = this.getFiles.bind(this) this.onChange = this.onChange.bind(this) }  getFiles() { let ans = [] let files = this.refs.fileLoader.files for (let i = 0; i < files.length; i++) { ans.push(files[i]) } return ans }  onChange(e) { if (!Tools.isNone(this.props.onChange)) { this.props.onChange(this.getFiles()) } this.refs.fileLoader.value = '' }  render() { let accept = this.props.accept if (Tools.isNone(accept)) { accept = 'image/*' if (Tools.isChrome()) { accept = 'image/jpeg,image/gif,image/png,image/bmp' } } return (  {this.props.children} { this.props.multiple == true ?  :  }  ); }} export default CSSModules(FileButton, styles);

input_area样式：

.input-area { width: 0px; height: 0px; position:absolute; clip:rect(0 0 0 0);}

此外：(@material-ui中Button的封装版本)

import React, { PureComponent } from 'react';import CSSModules from 'react-css-modules'; import Button from '@material-ui/core/Button';import Tools from '../../../common_js/Tools' import styles from './FileButton.css' class FileButton extends PureComponent { constructor(props) { super(props);  this.getFiles = this.getFiles.bind(this) this.onChange = this.onChange.bind(this) }  getFiles() { let ans = [] let files = this.refs.fileLoader.files for (let i = 0; i < files.length; i++) { ans.push(files[i]) } return ans }  onChange(e) { if (!Tools.isNone(this.props.onChange)) { this.props.onChange(this.getFiles()) } this.refs.fileLoader.value = '' }  render() { let {accept, onChange, children, multiple, ...other} = this.props if (Tools.isNone(accept)) { accept = 'image/*' if (Tools.isChrome()) { accept = 'image/jpeg,image/gif,image/png,image/bmp' } }  return (  { this.props.multiple == true ?  :  } {this.props.children}  ); }} export default CSSModules(FileButton, styles);