React Bootstrap Dropdown - PullRequest
Новая
       2

React Bootstrap Dropdown

0 голосов
/ 19 января 2020

Я новичок в React и Boostrap, поэтому прошу прощения за мой базовый c вопрос. Я искал документацию, но могу найти только фрагменты, а не то, как все это должно быть вместе ie.

Я использую реагировать - 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;

1 Ответ

1 голос
/ 19 января 2020

С 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>
...