Как управлять состоянием нескольких групп опций радио при отображении - PullRequest
Новая
       39

Как управлять состоянием нескольких групп опций радио при отображении

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

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

Приведенный ниже код отображает 2 набора радиогрупп (может быть больше), и состояния обеих групп управляются с помощью " const [delay, setDelay] = useState ('accept'); ". Мне нужно, чтобы состояние каждой группы управлялось отдельно. 

const [delay, setDelay] = useState('accept');

...

{data.map(({ delayOwner }, index: number) => (
            <Tr key={index}>
              {delayOwner && (
                <Td>
                  <RadioOption
                    groupId={`radioDelay-${index}`}
                    label="Accept"
                    onChange={() => setDelay('accept')}
                    value={delay === 'accept'}
                  />
                  <RadioOption
                    groupId={`radioDelay-${index}`}
                    label="Reject"
                    onChange={() => setDelay('reject')}
                    value={delay === 'reject'}
                  />
                </Td>
              )}

Текущий выход: если я выберу Принять / Отклонить в первой группе радиосвязи, вторая группа радиосвязи также изменится. 

* Accept O Reject
* Accept O Reject

* = selected, O = not selected

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Вы должны использовать индекс с вашим состоянием, чтобы отделить его 

{data.map(({ delayOwner }, index: number) => (
                            <Tr key={index}>
                                {delayOwner && (
                                    <Td>
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Accept"
                                            onChange={() => setDelay({...delay, index:"accept"})}
                                            value={delay[index] === 'accept'}
                                        />
                                        <RadioOption
                                            groupId={`radioDelay-${index}`}
                                            label="Reject"
                                            onChange={() => setDelay({...delay, index:"reject"})}
                                            value={delay[index] === 'reject'}
                                        />
                                    </Td>
                                )}
0 голосов
/ 02 апреля 2020

Если вам нужно, чтобы состояния управлялись раздельно, объявите два состояния. 

const [groupOneDelay, setGroupOneDelay] = useState('accept');
const [groupTwoDelay, setGroupTwoDelay] = useState('accept');

Если сопоставление будет проблемой, и это состояние больше никому не нужно в этом компоненте / файл, тогда вы, вероятно, должны переместить состояние в другой компонент и позволить этому компоненту обрабатывать состояние индивидуально.

Что-то вроде 

export default function RadioOptionComponent() {
  const [delay, setDelay] = useState('accept');

  return (
    <div
      groupId={`radioDelay-${index}`}
      label="Accept"
      onChange={() => setDelay({...delay, index:"accept"})}
      value={delay[index] === 'accept'}
    />
  )
}

И затем визуализировать этот компонент.

Также см. Комментарий JMadelaine, потому что вы должны рассмотреть, почему вы используете здесь радио-кнопки.

...