如何在上传按钮点击时显示对话框或动作设置withTiltle选择和选项相机，画廊和取消？

<button id="uploadBtn">上传</button>

<script>
  document.getElementById('uploadBtn').addEventListener('click', function() {
    var input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*'; // 可以根据需求设置允许上传的文件类型
    input.click();
  });
</script>

import React from 'react';
import { Button, Modal } from 'antd';

class UploadButton extends React.Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    // 处理确认按钮点击事件
    this.setState({
      visible: false,
    });
  };

  handleCancel = () => {
    // 处理取消按钮点击事件
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div>
        <Button onClick={this.showModal}>上传</Button>
        <Modal
          title="选择上传方式"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* 在对话框中放置上传方式选项，如相机、画廊等 */}
          <p>选择相机</p>
          <p>选择画廊</p>
        </Modal>
      </div>
    );
  }
}

export default UploadButton;

<button id="uploadBtn">上传</button>
<div id="dialog" class="hidden">
  <h2>选择上传方式</h2>
  <button id="cameraBtn">相机</button>
  <button id="galleryBtn">画廊</button>
  <button id="cancelBtn">取消</button>
</div>

<style>
  .hidden {
    display: none;
  }
</style>

<script>
  var uploadBtn = document.getElementById('uploadBtn');
  var dialog = document.getElementById('dialog');
  var cameraBtn = document.getElementById('cameraBtn');
  var galleryBtn = document.getElementById('galleryBtn');
  var cancelBtn = document.getElementById('cancelBtn');

  uploadBtn.addEventListener('click', function() {
    dialog.classList.remove('hidden');
  });

  cameraBtn.addEventListener('click', function() {
    // 处理相机按钮点击事件
    dialog.classList.add('hidden');
  });

  galleryBtn.addEventListener('click', function() {
    // 处理画廊按钮点击事件
    dialog.classList.add('hidden');
  });

  cancelBtn.addEventListener('click', function() {
    // 处理取消按钮点击事件
    dialog.classList.add('hidden');
  });
</script>