Question

我的父代码如下：

    handleDocumentModalClose = () => {
        setDocModalVisible(false);
        console.log("Modal was closed by parent");
    };

在渲染中，我像这样创建孩子：

<DocumentsModal
    test="prop test"
    visible={this.state.docModalVisible}
    onCloseHandler={this.handleDocumentModalClose}
/>

我的孩子是：

import React from "react";
import { Modal, View, Text, Button } from "react-native";

const DocumentsModal = props => {
    // const { onCloseHandler } = props;
    return (
        <Modal visible={props.visible}>
            <View>
                <Text>{props.test}</Text>
                <Button title="close" onClick={props.onCloseHandler} />
            </View>
        </Modal>
    );
};

export default DocumentsModal;

我确定这只是一个愚蠢的错误，但我无法弄清楚。我该如何正确地在props中传递一个函数，以便我的子组件在单击按钮时调用其父组件的方法（在本例中为handleDocumentModalClose）？

Answer 1

您需要使用 onPress （不是onClick）！

  <Button title="close" onPress={props.onCloseHandler} />

请参见docs

为什么我的子组件无法触发通过的props函数？

1 个答案: