javascript - 映射时如何管理多个单选选项组的状态

Question

我希望能够管理将动态呈现的无线电组的状态。

下面的代码呈现了 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

任何帮助将不胜感激！

标签： javascriptreactjsstateradio-group

Answer 1

您需要将索引与您的状态一起使用以使其分开

{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>
                                )}