Я пытаюсь добавить иконку к моей выпадающей кнопке реакции, как показано на следующей кнопке.

enter image description here

Я не мог найти способ реализовать это с помощью пакета начальной загрузки реакции, который я использую.

https://react-bootstrap.github.io/

Я пытался использовать обычную загрузку 4 к этому. Но обнаружил, что для открытия выпадающего меню нужен jquery. Как я могу добавить значок в выпадающий список моей начальной загрузки?

Мой код

   <DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
         <Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
         <Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
   </DropdownButton>

Мне удалось удалить выпадающий значок по умолчанию с помощью следующего CSS

.dropdown-toggle::after {
    display:none !important;
}
0
CraZyDroiD 29 Окт 2019 в 08:08

2 ответа

Лучший ответ

React Bootstrap позволяет настроить Dropdown, передавая пользовательские подкомпоненты. Чтобы настроить кнопку переключения, вы можете использовать:

// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* Render custom icon here */}
    &#x25bc;
    {children}
  </a>
));

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

Документы

2
Agney 29 Окт 2019 в 05:22

Вот с иконой

<DropdownButton id="example-month-input-2" title= 
{this.state.weekselectedType}>
     <Dropdown.Item onClick={() => this.changeWeekValue('a')}><i 
 class="fa fa-chevron-down"></i></Dropdown.Item>
     <Dropdown.Item onClick={() => 
this.changeWeekValue('b')}>B</Dropdown.Item>
     <Dropdown.Item onClick={() => 
this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>

Шрифт - устрашающий

1
CERFECTUS 29 Окт 2019 в 05:29
58601704