javascript - 根据 React 中的下拉菜单值在 iframe 之间切换

Question

我正在尝试在 React 中创建一个仪表板组件，我希望用户从下拉菜单中选择一个值并使用所选值加载 iframe。这是我到目前为止所拥有的：

import React, { Component } from 'react';
import Dropdown from 'react-bootstrap/Dropdown'


class Dashboard extends Component {
    render() {
        return (
            <div class="dashboard">
                <Dropdown>
                    <Dropdown.Toggle variant="success" id="dropdown-basic">
                        Dropdown Button
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item eventKey="1">Load 1st iframe</Dropdown.Item>
                        <Dropdown.Item eventKey="2">Load 2nd iframe</Dropdown.Item>
                        <Dropdown.Item eventKey="3">Load 3rd iframe</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown> 
                
                <iframe title="1" id="1" width="840px" height="900px" src="url1" ></iframe>
                <iframe title="2" id="2" width="840px" height="900px" src="url2" ></iframe>
                <iframe title="3" id="3" width="840px" height="900px" src="url3" ></iframe>
            </div>
        )
    }
}

export default Dashboard

这是我的第一个 React 项目，所以我不确定如何完成。我不需要坚持使用 react-bootstrap，所以如果有更好（或更简单）的解决方案，我会支持它。谢谢！

标签： javascriptreactjsiframedropdown