如何在 ReactJS 中将值从子组件传递给父组件

Question

我有这些功能组件：

CHILD:

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const ProductsQtde = props => {

    let [productQtde, setProductQtde] = React.useState(1)

    const changeQtde = arg => {
        if (arg === "increase") {
            setProductQtde(productQtde + 1)
        } else if (arg === 'decrease') {
            productQtde > 1 ? setProductQtde(productQtde - 1) : setProductQtde(1)
        }
    }


    return (
        <div className="product-qtde d-flex justify-content-around align-items-center border">
            <p style={{margin: '0'}}>{productQtde}</p>
            <div className="product-qtde-arrows d-flex flex-column justify-content-between">
                <FontAwesomeIcon onClick={() => changeQtde('increase')} icon="chevron-up" size="xs"/>
                <FontAwesomeIcon onClick={() => changeQtde('decrease')} icon="chevron-down" size="xs"/>
            </div>
        </div>
    )
}

export default ProductsQtde

PARENT:

import React from 'react'

import ProductQtde from '../../Shared/UI/ProductsQtde/ProductsQtde'


    const Cart = props => {
    
        return (
            <div>
                <ProductQtde />
            </div>
        )
    }
    
    export default Cart

这是结果：

可以看出，它是一种输入数字，因此，它的功能是增加和减少所需的任何数量。

但是，由于它是一个共享组件，并且我想让它具有功能性而不仅仅是一个 UI 组件，因此我在组件本身中使用状态productQtde设置它的值，这样我就不需要创建函数changeQtde在我使用的每个父组件中ProductsQtde 。

关键是，我想在子组件中不断更改这个值，在父组件中接收它并在那里使用它。 我知道我可以在父组件中设置一个函数和一个状态，并将其作为道具发送给子组件，但正如我所说，我想将功能保留在子组件中。

有可能这样做吗？

我发现了一些回答类似问题的帖子和教程，但没有一个给我我需要的具体答案。

Answer 1

我一直在挖掘，然后在这篇文章的帮助下我可以达到我的目标： https : //dev.to/pnkfluffy/passing-data-from-child-to-parent-with-react-hooks-1ji3

解决方案非常简单，依赖于回调函数。

我正在做的是将一个函数作为道具传递给子组件，这个函数反过来调用这个函数并将更新的值作为参数发送给父组件。 Cart组件接收该值作为参数并使用它来更新自己的状态。

CHILD:

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const ProductsQtde = props => {

    let [productQtde, setProductQtde] = React.useState(1)

    const changeQtde = arg => {
        if (arg === "increase") {
            setProductQtde(productQtde + 1)
            props.changeQtdeCallBack(productQtde + 1) // => Callback function
        } else if (arg === 'decrease') {
            productQtde > 1 ? setProductQtde(productQtde - 1) : setProductQtde(1)
            props.changeQtdeCallBack(productQtde - 1) // => Callback function
        }
    }


    return (
        <div className="product-qtde d-flex justify-content-around align-items-center border">
            <p style={{margin: '0'}}>{productQtde}</p>
            <div className="product-qtde-arrows d-flex flex-column justify-content-between" >
                <FontAwesomeIcon onClick={() => changeQtde('increase')} icon="chevron-up" size="xs"/>
                <FontAwesomeIcon onClick={() => changeQtde('decrease')} icon="chevron-down" size="xs"/>
            </div>
        </div>
    )
}

export default ProductsQtde

PARENT:

    import React from 'react'
    
    import ProductQtde from '../../Shared/UI/ProductsQtde/ProductsQtde'
    
    
    const Cart = props => {
    
        const [qtde, setQtde] = React.useState(1)
        
        
        return (
            <div>
                <ProductQtde 
                   {/* // => function being sent as props */}
                   changeQtdeCallBack={qtde => setQtde(qtde)} 
                />
            </div>
        )
    }
    
    export default Cart