将道具传递给家长[重复]

Question

我试图使用在child中的函数中生成的值。js并将其传递给父级。所以我可以使用这个值来过滤子数组。

小孩js

const returnDistance = () => {
            const dist = getDistance(userLat, userLng, lat, lng).toFixed(1);
            this.props.onCalculateDistance(dist);
            return dist;
        }

return dist是生成的值，我需要在父级中访问该值。js

Parent.js

// The callback function
    distanceChange = (dist) => {
            console.log(dist)
            return dist;
    }

//The map to render child.js data. Im passing distanceChange as a prop.
{filteredResults.filter(({ node }) => (node.onCalculateDistance >= 0)).map(({ node }) => {
    return (
        <SpaceWrapper key={node.id}>
            <Space node={node} onCalculateDistance={this.distanceChange} />
        </SpaceWrapper>
    )
}
)}

我是不是错过了一些显而易见的东西？控制台。日志fordistanceChange返回子项的所有值。js节点，但当用作道具时返回未定义。

如何让函数运行，这样我就可以用返回的值过滤结果？

谢谢

Answer 1

我认为你所做的只是返回一个值，而不是用它做任何事情。要让父级存储dist的值，它需要具有该属性。

您需要做的是将属性dist添加到父级，然后在父级中定义getDistance。然后，您可以将getDistance传递给子级，子级可以调用该函数来更新父级this。状态dist属性。

例如，你可以

父母亲js

return (
    <SpaceWrapper key={node.id}>
        <Space node={node} getDistance={this.getDistance} />
    </SpaceWrapper>
)

然后在child中可以调用this。道具。getDistance（）更新

希望这对你有帮助。