React Bootstrap 下拉菜单

Question

我是 React 和 Boostrap 的新手，所以请原谅我的基本问题。我一直在寻找文档，但只能找到sn-ps，而不是它应该如何结合在一起。

我正在使用react-bootstrap 并已成功呈现下拉菜单。

我有以下组件：

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

class VesselDropdown extends Component {

    constructor(props) {
        super(props)    
        this.state = {
            vessels:[]
        }
    }

    componentDidMount() {
        fetch('http://localhost:3001/get/vessels')
        .then(res => res.json())
        .then((data) => {
          this.setState({ 
              vessels: data,
              test: 'xyz'
            })
        })
        .catch(console.log)
    }

    render() {
        console.log(this.state);
        return (

            <Dropdown>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
                Select a Vessel
            </Dropdown.Toggle>

            <Dropdown.Menu>
                {
                    this.state.vessels.map(d => {
                        return <Dropdown.Item href="#/{d.vesselimo}">{d.vesselname}</Dropdown.Item>
                    })
                }
            </Dropdown.Menu>
            </Dropdown>

        );
      }
}

export default VesselDropdown;

问题

我现在需要添加动作功能。

1. 如何单击 Dropdown.Item 调用另一个组件 (VesselDetails) 并显示其输出？我是否需要更改项目上的href（更改为什么）？
2. VesselDetails 组件如何接收传递给它的参数（容器标识符vesselimo）？

谢谢

更多信息：

VesselDetails 组件仍在进行中，但这是我目前所拥有的：

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

class VesselDetails extends Component {

    constructor(props) {
        super(props)    
        this.state = {
        }
    }

    componentDidMount() {
        fetch('/get/latestcalls/:imo')
        .then(res => res.json())
        .then((data) => {
          this.setState({ 
            latestcalls : data
            })
        })
        .catch(console.log)
    }

    render() {
        return (
            <div>
                <h3>Port Calls</h3>
                <Table striped bordered hover>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>Detail1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1</td>
                    <td>Mark</td>
                    </tr>
                </tbody>
                </Table>
            </div>
        );
      }
}

export default VesselDetails;

Answer 1

使用onSelect，您可以访问vesselimo

    handleSelect (evt) {
      // pass as props or call api
      console.log(evt)
  }

....

<Dropdown.Item onSelect={(evt)=>{this.handleSelect(evt)}} 
       eventKey={d.vesselimo}>{d.vesselname}</Dropdown.Item>