React自定义文件选择按钮

项目中经常会遇到选择本地文件的需求，原生写法<input type="file"/>就可以实现此功能，但实际上往往需要自定义按钮样式，这时简单写法就不太满足要求了。

我们可以写一个自定义样式的按钮，然后把input标签重叠在上面，设置input标签透明，这样就实现了看到的是自定义的样式，点击又可以选择文件的需求。但是这样的写法不好保证两个控件大小一致，就会出现点击按钮之外的区域，也可以选择文件的问题。

下面用MUI实现一个简单的自定义文件选择按钮样式，同时解决边界问题。

import { styled } from '@mui/material';
import Link from '@mui/material/Link';

const VisuallyHiddenInput = styled('input')({
  clip: 'rect(0 0 0 0)',
  clipPath: 'inset(50%)',
  height: 1,
  overflow: 'hidden',
  position: 'absolute',
  bottom: 0,
  left: 0,
  whiteSpace: 'nowrap',
  width: 1,
});

const FileSelect = (props) => {
  const { onFileSelected } = props;
  return (
    <Link component="label" variant="subtitle1">
      Click to upload
      <VisuallyHiddenInput type="file" onChange={onFileSelected} />
    </Link>
  );
};

实现的效果如下：

解释一下，上面的代码中，我们自定义了input，将大小设置为0并且不可见， 然后input标签外层被label标签包裹，这个label是input元素的标注，点击label和点击input区域一样，都会触发文件选择弹窗弹出。 

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

这样处理，点击此按钮，实际点击的就是自定义的label，解决了用两个控件实现的方式带来的边界问题。