javascript - 在我的模态对话框中打开一个外部 URL 页面并捕获一些正在提交给父 React 的信息

Question

我有一个名为 Dashboard 的组件，它正在打开一个模式对话框，我想要的是，我想在该模式对话框中打开一个外部 url，如 google.com，用户在搜索文本框中输入的内容我想将它捕获到我的父窗口中或组件，这可能吗，如果它不是来自 google.com，那么其他一些 url，是否可以使用 React JS/React native？这是仪表板组件代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Modal } from './Modal';

class Dashboard extends React.Component {
    state = { show: false };

showModal = () => {
    this.setState({ show: true });
};

hideModal = () => {
    this.setState({ show: false });
};

render() {
    return (
        <main>
            <h1>React Modal</h1>
            <Modal show={this.state.show} handleClose={this.hideModal}>
                <p>Modal</p>
                <p>Data</p>
            </Modal>
            <button type="button" onClick={this.showModal}>
                open
    </button>
        </main>
    );
}
}    
export default Dashboard;

这是我的模态js代码

import React, { Component } from "react";
import './ModalSS.css';

export const Modal = ({ handleClose, show, children }) => {
    const showHideClassName = show ? "modal display-block" : "modal display-none";
return (
    <div className={showHideClassName}>
        <section className="modal-main">
            {children}
            <button onClick={handleClose}>close</button>
        </section>
    </div>
 );
}

这是我的CSS：

 body {
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-main {
    position: fixed;
    background: white;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.display-block {
    display: block;
}

.display-none {
    display: none;
}

知道如何在此模式中加载新的外部 url，当用户输入值并单击搜索或提交时，它会关闭模式并将一些信息发送到最终父组件。是否有可能，如果是的话，我该怎么做 - 请提供任何帮助 - 在此先感谢。

标签： javascriptreactjs