Несколько строк ButtonGroup в реакции-начальной загрузке - PullRequest
Новая
       26

Несколько строк ButtonGroup в реакции-начальной загрузке

0 голосов
/ 30 мая 2018

Я новичок, чтобы отреагировать, но у меня хороший опыт работы с начальной загрузкой, и я использовал начальную загрузку раньше, чем несколько раз сделал ButtonGroup, где кнопки переходят в несколько строк.Прямо сейчас я работаю с реакцией и пытаюсь сделать то же самое с помощью реактивной загрузки, но это кажется невозможным.Это то, что я делаю до сих пор: 

<ToggleButtonGroup vertical type="radio" name ="options">
  <ButtonGroup justified> 
   <ToggleButton>1</ToggleButton>
   <ToggleButton>2</ToggleButton>
  </ButtonGroup>
  <ButtonGroup justified>
   <ToggleButton>3</ToggleButton>
   <ToggleButton>4</ToggleButton>
  </ButtonGroup>
</ToggleButtonGroup>

Это, насколько я понимаю, соответствует способу сделать это с помощью bootstrap и html, но он по-прежнему показывает все кнопки по вертикали, а не по двумстроки по назначению

РЕДАКТИРОВАТЬ:

Вот пример того, что я ищу: пример

Чтобы уточнить большедве строки принадлежат одной и той же группе, поэтому одновременно можно выбрать только одну опцию из двух строк.

1 Ответ

0 голосов
/ 30 мая 2018

Вы используете вертикальный в своем компоненте ToggleButtonGroup, удалите его, и вместо ButtonGroup вы должны использовать ToggleButtonGroup, а для рендеринга обеих групп в отдельных строках вы должны обернуть их на панели инструментов как 

  <ButtonToolbar>
    <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
      <ToggleButton value={1}>Radio 1</ToggleButton>
      <ToggleButton value={2}>Radio 2</ToggleButton>
      <ToggleButton value={3}>Radio 3</ToggleButton>
      <br/>
      <ToggleButton value={4}>Radio 4</ToggleButton>     
      <ToggleButton value={5}>Radio 5</ToggleButton>
      <ToggleButton value={6}>Radio 6</ToggleButton>
    </ToggleButtonGroup>
  </ButtonToolbar>
...