React 函数式组件 子组件给父组件传值1.0

父组件：

// handleImg是回调函数，imgPath是子组件给父组件传递的数据
const handleImg = (imgPath:any) => {
    setCardImg(imgPath)
    console.log(imgPath,'imgPath');
  }

<ImgUpload onChange={handleImg}/>

子组件:

const handleChange = (e:any) => {
  const fileList = e.fileList
  setImgList(fileList)
  if(e.file.response?.data.img){
    // 子组件调用从父组件中解构出来的onChange回调函数，并将参数传递给父组件
    onChange(e.file.response.data.img)
  }
}

<Upload
  action="http://localhost:9000/api/v1/element/img/upload"
  listType="picture-card"
  fileList={imgList}
  onChange={handleChange}
  name='img'
>
  {imgList.length >= 1 ? null : uploadButton}
</Upload>

完整案例(ant-design组件库中的图片上传)：
父组件：

import React, { useRef, useState, useEffect } from 'react'
import { Form, Input, Button, Radio, Menu, Dropdown, message, Modal  } from 'antd'
import { CaretDownOutlined, PlusOutlined } from '@ant-design/icons'
import ImgUpload from '@/components/ImgUpload'
import './style.scss'
export default () => {
  const inputEl: any = useRef(null)
  const [colorClass, setColorClass ] = useState('color1')
  const [cardImg, setCardImg ] = useState('')
  const [visible, setVisible] = useState(false);
  const [visibleModal, setVisibleModal] = useState(false);
  const onFinish = (values: any) => {
    values.color = colorClass
    console.log('Success:', values)
  }
  const nameHandle = (e: any) => {
    inputEl.current.innerText =  e.target.value==='' ? '卡片名称' : e.target.value
  }
  const colorChange = ({ key }: any) => {
    setColorClass(key)
  }
  const modalChange = () => {
    setVisible(false) 
    setVisibleModal(true)
  }
  const backImg = () => {
    setVisible(true) 
    setVisibleModal(false)
  }
  const modalTitle = () => {
    return (
      <>
        <a onClick={backImg}>&lt; 我的图片</a> <span>/ 本地上传</span>
      </>
    )
  }
  const handleImg = (imgPath:any) => {
    setCardImg(imgPath)
    console.log(imgPath,'imgPath');
  }
  const menu = (
    <Menu onClick={colorChange}>
      <Menu.Item key="color1" className='color1 box'></Menu.Item>
      <Menu.Item key="color2" className='color2 box'></Menu.Item>
      <Menu.Item key="color3" className='color3 box'></Menu.Item>
      <Menu.Item key="color4" className='color4 box'></Menu.Item>
      <Menu.Item key="color5" className='color5 box'></Menu.Item>
      <Menu.Item key="color6" className='color6 box'></Menu.Item>
    </Menu>
  )
  return (
    <div className='create-card'>
      <span className='create-title'>基本信息</span>
      <div className='create-form'>
        <div className={`card-box ${colorClass}`}>
          <span className='cardName' ref={inputEl} >卡片名称</span>
          <span className='validPeriod'>永久有效</span>
        </div>
        <Form
          name="basic"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 11 }}
          onFinish={onFinish}
          style={{marginTop: '25px'}}
        >
          <Form.Item
            label="名称："
            name="cardname"
            rules={[{ required: true, message: '请输入名称' }]}
          >
            <Input 
              placeholder="最多输入9个字符" 
              style={{width:'177px'}} 
              onChange={nameHandle}
            />
          </Form.Item>

          <Form.Item 
            name="radio-group" 
            label="背景设置"
            rules={[{ required: true, message: '请选择背景' }]}
          >
            <Radio.Group>
              <Radio value="color">
                <span>背景色</span>
                <div className='select-color'>
                  <Dropdown 
                    trigger={['click']}
                    overlay={menu} 
                    overlayClassName='select-box' 
                  >
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                      <span className={`color-box ${colorClass}`}></span><CaretDownOutlined />
                    </a>
                  </Dropdown>
                </div>
              </Radio>
              <br />
              <Radio value="img" className='Imgradio'>
                <span>背景图</span><br />
                <div onClick={() => setVisible(true)} className='toImgModal' >
                  <PlusOutlined />
                </div>
                <Modal
                  title="我的图片"
                  centered
                  visible={visible}
                  onOk={() => setVisible(false)}
                  onCancel={() => setVisible(false)}
                  width={900}
                  bodyStyle={{height: '350px', overflowY: 'auto'}}
                  style={{borderRadius: '5px', padding: '0 0 16px'}}
                  transitionName="" 
                  maskTransitionName=""
                >
                  <Button type="primary" onClick={modalChange}>上传图片</Button>
                  <p>aaaaaaa</p>
                  <p>some contents...</p>
                  <p>some contents...</p>
                </Modal>
                <Modal
                  title={modalTitle()}
                  centered
                  visible={visibleModal}
                  onOk={() => setVisibleModal(false)}
                  onCancel={() => setVisibleModal(false)}
                  width={900}
                  bodyStyle={{height: '350px', overflowY: 'auto'}}
                  style={{borderRadius: '5px', padding: '0 0 16px'}}
                  transitionName="" 
                  maskTransitionName=""
                >
                  <span>本地图片</span>  
                  <ImgUpload onChange={handleImg}/>
                </Modal>
              </Radio>

            </Radio.Group>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

子组件：

import React, { useState } from 'react';
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
export default ({onChange}:any) => {
  const [imgList, setImgList] = useState([])
  const handleChange = (e:any) => {
    const fileList = e.fileList
    setImgList(fileList)
    if(e.file.response?.data.img) onChange(e.file.response.data.img)
  }
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 10 }}>上传</div>
    </div>
  )
  return (
    <>
      <Upload
        action="http://localhost:9000/api/v1/element/img/upload"
        listType="picture-card"
        fileList={imgList}
        onChange={handleChange}
        name='img'
      >
        {imgList.length >= 1 ? null : uploadButton}
      </Upload>
    </>
  )
}

// http://localhost:9999//api/v1/element/upload/img