使用选项卡导航的无线电 tabIndex 在反应中不起作用答案

【问题标题】：radio tabIndex to navigate using tab doesn't work in react使用选项卡导航的无线电 tabIndex 在反应中不起作用
【发布时间】：2020-06-10 06:14:32
【问题描述】：

我有 2 个单选按钮，我希望我可以在到达单选输入时使用 tabIndex，因此可以使用键盘上的向上/向下箭头按钮导航和选择值，但它不适用于我的代码

<div>
        {[
          {
            id: '1',
            name: 'One',
            label: '1',
            value: false,
            defaultChecked: true,
          },
          {
            id: '2',
            name: 'Two',
            label: '2',
            value: true,
          },
        ].map(({ id, name, label, value, defaultChecked }) => (
          <div key={id} >
            <Radio
              key={id}
              id={id}
              name={name}
              value={value.toString()}
              defaultChecked={defaultChecked}
              onChange={e => console.log(e)}
              tabIndex={+id}
            >
              {label}
            </Radio>
          </div>
        ))}
      </div>

演示 https://stackblitz.com/edit/react-ts-xbcqdf

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您的选项卡正在工作，但您需要为两个复选框使用相同的名称，以便它们作为一个组工作，相应地选择和取消选择。

<Radio
   key={id}
   id={id}
   name="someName"  // render same name for both checkbox
   value={value.toString()}
   defaultChecked={defaultChecked}
   onChange={e => console.log(e)}
   tabIndex={+id}
   >
     {label}
</Radio>

【讨论】：