如何将属性传递给React中的其他组件？

Question

我一直在为某个站点使用一些样板代码，并且有兴趣对其进行一些更改。基本上，我想做的是将“提交”数据按钮与“添加到购物车”按钮结合在一起。据我了解，提交按钮将数据发送到数据库，添加到购物车按钮将数据添加到购物车。

我有两个文件。第一个在下面。我假设这是容纳“ onSubmit”信息的组件。

import React, { Component } from 'react'
import { Typography, Button, Form, Input } from 'antd';
import axios from 'axios';
import FileUpload from '../../utils/FileUpload';

const { Title } = Typography;
const { TextArea } = Input; 

export class UploadProductPage extends Component {

    state = {
        title: '',
        description: '',
        continents: 1,
        images: [],
        price: 0
    }

    handleChangeTitle = (event) => {
        this.setState({ title: event.currentTarget.value })
    }

    handleChangePrice = (event) => {
        this.setState({ price: parseInt(event.currentTarget.value, 10) })
    }

    handleChangeDecsription = (event) => {
        // console.log(event.currentTarget.value)
        this.setState({ description: event.currentTarget.value })
    }

    onSubmit = (event) => {
        event.preventDefault();

        if (this.props.user.userData && !this.props.user.userData.isAuth) {
            return alert('Please Log in First')
        }

        if (!this.state.title || !this.state.description || !this.state.images
            || !this.state.price) {
            return alert('Please first fill all the fields')
        }

        const variables = {
            writer: this.props.user.userData._id,
            title: this.state.title,
            description: this.state.description,
            images: this.state.images,
            continents: this.state.continents,
            price: this.state.price
        }

        axios.post('/api/product/uploadProduct', variables)
            .then(response => {
                if (response.data.success) {
                    alert('video Uploaded Successfully')
                    setTimeout(() => {
                        this.props.history.push('/')
                    }, 1000);
                } else {
                    alert('Failed to upload video')
                }
            })
    }

    updateFiles = (newImages) => {
        this.setState({ images: newImages })
    }


    render() {
        return (
            <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2} > Upload Travel Product</Title>
            </div>

            <Form onSubmit={this.onSubmit}>

               <FileUpload refreshFunction={this.updateFiles} />

                <br /><br />
                <label>Title</label>
                <Input
                    onChange={this.handleChangeTitle}
                    value={this.state.title}
                />
                <br /><br />
                <label>Description</label>
                <TextArea
                    onChange={this.handleChangeDecsription}
                    value={this.state.description}
                />
                <br /><br />
                <label>Price($)</label>
                <Input
                    type="number"
                    onChange={this.handleChangePrice}
                    value={this.state.price}
                />
                <br /><br />

                <br /><br />

                <Button type="primary" size="large" onClick={this.onSubmit}>
                    Submit
                </Button>
            </Form>
        </div>
        )
    }
}

export default UploadProductPage

第二个文件是这个，这是我假设正在将产品添加到购物车中的内容：

import React, { useEffect, useState, Component } from 'react'
import { Button, Descriptions } from 'antd';
import UploadProductPage from '../../UploadProductPage/ProductFormComponents';
import axios from 'axios';

function ProductInfo(props) {


    const [Product, setProduct] = useState({})

    useEffect(() => {

        setProduct(props.detail)

    }, [props.detail])

    const addToCarthandler = () => {
        props.addToCart(props.detail._id)
    }



    return (
        <div style={{position: 'center'}}>


            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button size="large" shape="round" type="danger" 
                    onClick={() => {
                        addToCarthandler();
                    }}
                >
                    Add to Cart
                    </Button>
            </div>
        </div>
    )
}

export default ProductInfo

我一直想做的是将“ onSubmit”的道具传递给第二个文件，因此我可以在返回的“ addToCarthandler”函数上方添加它。我不确定这是否可行或解决问题的正确方法，但这是我一直在努力的工作，但没有成功。谢谢您的宝贵时间。