Сопоставление параметров радио не работает должным образом - PullRequest
Новая
       30

Сопоставление параметров радио не работает должным образом

0 голосов
/ 02 апреля 2020

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

const [delayAllocation, setDelayAllocation] = React.useState('accept');
...

      <TBody>
          {data.map(({ code, decode, delay, delayOwner }, index: number) => (
            <Tr key={index}>
              <Td>{code}</Td>
              <Td>{decode}</Td>
              <Td>{addMinsPostfix(delay)}</Td>
              {delayOwner && delayResolver && ( //these conditions will show the radio options
                <Td>
                  <RadioOption
                    groupId="radioDelayAllocation"
                    label="Accept"
                    onChange={() => setDelayAllocation('accept')}
                    value={delayAllocation === 'accept'}
                  />
                  <RadioOption
                    groupId="radioDelayAllocation"
                    label="Reject"
                    onChange={() => setDelayAllocation('reject')}
                    value={delayAllocation === 'reject'}
                  />
                </Td>
              )}
            </Tr>
          ))}
        </TBody>

Вывод: вывод 

O Accept * Reject
O Accept O Reject

* = selected, O = unselected

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

Выход желаний: 

* Accept O Reject
* Accept O Reject

or 

O Accept * Reject
O Accept * Reject

or 

* Accept O Reject
O Accept * Reject

* = selected, O = unselected

Выход желаний будет состоять в том, чтобы иметь возможность разделять параметры радио и получить это состояние для этой группы опций радио. Я уже пытался использовать реквизиты id = {index} для тегов Td и RadioOption, но не повезло.

Заранее спасибо. :)

...