如何在 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