React自定义input样式以及实现上传照片功能

原创

A吴迪网络工作室 2022-03-21 15:27:26 ©著作权

文章标签 React自定义input样式 React实现上传照片 React实现上传图片 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者A吴迪网络工作室的原创作品，请联系作者获取转载授权，否则将追究法律责任

今天给大家带来React自定义input的样式，以及保留input的功能

React实现：

实现原理：

给input加ref，然后在你自定义样式的标签上面加点击事件，触发input的点击事件。

或者用label，都可以的。

如果用label实现请看：改变input样式

import React, { Component, Fragment } from 'react';
import { message, Spin, Icon, notification } from 'antd';

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
export default class UploadPhoto extends Component {
  constructor(props) {
    super(props)
    this.state = {
      submitLoading: false,
    }
    this.fileInputEl = React.createRef();
  }
  handlePhoto = async (event) => {
    const files = [...event.target.files];
    if (files.length === 0) return;
    await this.setState({ submitLoading: true })
    let result = await Promise.all(
      files.map(file => {
        let url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(file)
        }
        return url;
      })
    );
    console.log(result)  //现在你就可以根据这个结果做你想做的事了，通过上面的createObjectURL方法处理过，这个result里面的url你是可以直接放到img标签里面的src属性上了，就可以展示出来了。
  }
  render() {
    return (
      <Fragment>
        <Spin indicator={antIcon} spinning={this.state.submitLoading}>
          <input
            type="file"
            ref={this.fileInputEl}  //挂载ref
            accept=".jpg,.jpeg,.png"  //限制文件类型
            hidden  //隐藏input
            onChange={(event) => this.handlePhoto(event)}   
          >
          <a
            onClick={() => {
              this.fileInputEl.current.click()    //当点击a标签的时候触发事件
            }}
            //自己看心情改样式吧
            style={{
                            height: '39px',
                            lineHeight: '39px',
                        }}
          >上传照片
          </a>
        </Spin>
      </Fragment>
    )
  }
}