Question

我正在使用react-bootstrap下拉列表，但它不会扩展。我可以看到类更改在开发工具中打开但它没有在浏览器中打开。

我按照here上发布的解决方案，但它对我没有帮助。我也按照here发布的解决方案，但它仍然无效。当我点击下拉列表时，控制台也没有给我任何错误。任何帮助表示赞赏。

（这不是整个代码，只是相关代码）

    import React, { Component } from 'react';
    import Table from 'react-bootstrap/lib/Table';
    import Button from 'react-bootstrap/lib/Button';
    import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
    import DropdownButton from 'react-bootstrap/lib/DropdownButton';
    import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
    import MenuItem from 'react-bootstrap/lib/MenuItem';

    class ListBooks extends Component {
      render(){

        showingBooks.sort(sortBy('title'))
        return(
          <div className="list-books">
            <div className="list-books-title">
              <h1>BookReads</h1>
            </div>
            <input type="text"
              placeholder="Search by title or author"
              value={this.state.query}
              onChange={(event) => this.updateQuery(event.target.value)}
              className="search-field"
              />
            <div className="list-books-content">
              <div>
                <Table striped bordered hover>
                  <thead>
                    <tr>
                      <th className="book-header">Book</th>
                      <th className="book-header">Author</th>
                      <th className="book-header"> Shelf </th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>{showingBooks.map((book)=>(
                      <tr key={book.id}>
                        <td className="bookShelfTable">                      
                          <div> {book.description} </div>
                        </td>
                        <td>
                          <div> {book.authors} </div>
                        </td>
                        <td>{this.shelfName(book)}</td>
                        <td>
                          <ButtonToolbar>
                            <DropdownButton title="Default button" id="dropdown-size-medium">
                              <MenuItem eventKey="1">Action</MenuItem>
                              <MenuItem eventKey="2">Another action</MenuItem>
                              <MenuItem eventKey="3">Something else here</MenuItem>
                              <MenuItem divider />
                              <MenuItem eventKey="4">Separated link</MenuItem>
                            </DropdownButton>
                          </ButtonToolbar>
                          <div> <i className="fa fa-times" onClick={() => this.props.onDeleteBook(book)}/></div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
            </div>
          </div>
        )
      }
    }

    export default ListBooks

Bootstrap Dropdown不会扩展

0 个答案: