Почему мой дочерний компонент не запускает пропущенную функцию поддержки?

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;

Я уверен, что это просто глупая ошибка с моей стороны, но я не могу понять это. Как правильно передать функцию в реквизит, чтобы мой дочерний компонент вызывал метод своего родителя (в данном случае handleDocumentModalClose) при нажатии кнопки?

Answer 1

Вам необходимо использовать onPress, (не onClick)!

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

См. документы