Question

基本上，我有一组页面通常以模式显示，但可能不会。我有一个Manager组件，它通过我们需要的特定流程来处理它们之间的关系。我在MyModal组件的标题中有一个后退按钮，单击该按钮时，我需要以某种方式告诉Manager返回上一页。但是，Manager对后退按钮一无所知，页面也不知道

问题：：如何向Manager组件发送事件或执行其他操作，以便在单击BackButton时知道返回上一页？ / p>

这是一些示例代码。

const MyModal: React.FC = ({show, onHide}) => (
    <Modal show={show} onHide={onHide}>
        <BackButton onClick={/* What do I do here? */}/>
        <Modal.Body>
            <Manager {/* Do I put something here? */}/>
        </Modal.Body>
    </Modal>
);

const Manager: React.FC = () => {
    const [page, setPage]: [number, (d: number) => void] = useState(0);

    return (
        <>
            {[
                <Page1 onComplete={() => setPage(1)}/>
                <Page2 onComplete={() => setPage(2)}/>
                <Page3 onComplete={() => setPage(1)} onCancel={() => setPage(3)/>
                <Page4 onComplete={() => setPage(4)}/>
                <Page5 onComplete={() => setPage(1)}/>
            ][page]}
        </>
    );
};

P.S。 Modal和Modal.Body来自react-bootstrap。我认为这更好地说明了保留它们的想法。

我的想法：我知道我可以将两者混为一谈，在大多数情况下都可以，但是我想知道这是否有可能。如果可以的话，可以将动作放到单独的组件中。我想知道是否以某种方式使用ref，但是我已经阅读了很多关于它们的内容，但我仍然感到困惑。我以为可以以某种方式将ref传递给按钮进入Manager组件，但无法正常工作。

处理子元素中的父元素单击

0 个答案: