没有javascript的自定义单选tabIndex？答案

【问题标题】：custom radio tabIndex without javascript?没有javascript的自定义单选tabIndex？
【发布时间】：2020-06-18 03:56:31
【问题描述】：

我可以在本机单选按钮上应用 tabindex 并使用 tab 在键盘上通过 arrow up 和 arrow down 更改值。但是我可以对隐藏实际 <input type="radio" /> 的自定义收音机做同样的事情吗？

https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

除了display:none;，您可以保留本机单选按钮并重新设置它们的样式，使它们看起来不可见，但仍可按预期工作。

只是您可以在style.css 中尝试的一种方法：

.radioBtn input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

此外，如果您想使用 tab 键导航到您的自定义单选按钮组，您可以为单选标签元素启用该功能：

const Radio = ({
  id,
  name,
  value,
  defaultChecked,
  onChange,
  children,
  tabIndex
}) => (
  <div
  className="radioBtn"
  >
    <input
      type='radio'
      defaultChecked={defaultChecked}
      value={value}
      id={id}   
      name={name}
      onChange={onChange}
      tabIndex={tabIndex}
    />
    <label className="radio" htmlFor={id}  tabIndex={tabIndex}>
      <span className="big">
        <span className="small"></span>
      </span>
      <span>{children}</span>
    </label>
  </div>
);

【讨论】：