当我点击图标时，如何打开文件上传对话框

Question

我正在做一个React项目，在这个项目中我有一张卡片，在卡片中我有React图标，所以

我试图做的是如果我点击反应图标，那么文件上传对话框必须打开

请有人帮助实现这一点我正在使用Reactstrap进行

这是我的代码Form.js

import React, { useState, useRef } from 'react';
import './Form.css';
import { MdCloudUpload } from 'react-icons/md';
import { Row,Col,Button,Modal,ModalBody,ModalFooter } from 'reactstrap'
const Form = () => {
const inputFile = useRef(null)
const onButtonClick = () => {
inputFile.current.click();
};
return (
<Row>
<Col md="6" sm="6" xs="6">
<Modal isOpen={true}
>
<ModalBody>
<Row>
<Col md="4" sm="4" xs="4">
<div className="image-upload">
<input type='file' id='file' ref={inputFile} style={{ display: 'none' }}/>
<MdCloudUpload onClick={onButtonClick} className=' icon'></MdCloudUpload>
</div>
</Col>
<Col md="8" sm="8" xs="8">
</Col>
</Row>

</ModalBody>
<ModalFooter>
<Button color="secondary">
Cancel
</Button>
<Button type="submit" color="primary">
Submit
</Button>
</ModalFooter>
</Modal>
</Col>
</Row>
)
}
export default Form

Answer 1

有两个选项：

1. 使用类似react-dropzone的侧库

2. 只需添加<input type="file" />并在点击图标时触发更改事件

这里有一个示例

import React, { useState } from "react";
import "./Form.css";
import { MdCloudUpload } from "react-icons/md";
const Form = () => {
const onIconClick = () => {
const input = document.getElementById('file-input');
if (input) {
input.click();
}
};
return (
<Row>
<Col md="6" sm="6" xs="6">
<Modal isOpen={true}>
<ModalBody>
<Row>
<Col md="4" sm="4" xs="4">
<div className="image-upload">
<MdCloudUpload
className="icon"
onClick={onIconClick}
/>
<input
type="file"
id="file-input"
style={{ display: 'none' }}
/>
</div>
</Col>
<Col md="8" sm="8" xs="8" />
</Row>
</ModalBody>
<ModalFooter>
<Button color="secondary">Cancel</Button>
<Button type="submit" color="primary">
Submit
</Button>
</ModalFooter>
</Modal>
</Col>
</Row>
);
};
export default Form;