Tabindex 不关注下一个元素

Question

我正在尝试使用 React/TypeScript 在不同的单选按钮输入之间进行切换。我可以让第一个单选按钮聚焦，但是当我单击选项卡时，它聚焦在单选按钮之外。我尝试使用react-focus-trap，但选项卡不会聚焦于任何输入元素（不过我可能使用不正确）。

这是我的组件，我在其中设置组件上的选项卡索引

RadioButton.tsx

import { useState } from "react";
import type { SurveyAnswer } from "./demographicssurvey";

interface RadioButtonAnswersProps {
  answers: SurveyAnswer[];
  updateCurrentAnswer: (val: string) => void;
  setDisabled: (val: boolean) => void;
}
export default function RadioButtonAnswers({
  answers,
  updateCurrentAnswer,
  setDisabled,
}: RadioButtonAnswersProps) {
  const [disabledInput, setDisabledInput] = useState("");
  const handleChange = (val: string) => {
    updateCurrentAnswer(val);
    setDisabled(false);
  };

  const radioBtn = (a: SurveyAnswer, index: number) => {
    console.log("Index is:", index)
    return (
        <label>
          <input
            autoFocus={index === 0}
            tabIndex={0}
            className="form-radio"
            type="radio"
            name="myRadio"
            value={a.answer}
            onFocus={(e) =>  {
              e.target.checked = true;
              handleChange((e.target as HTMLInputElement).value)
            }}
            onClick={(e) => handleChange((e.target as HTMLInputElement).value)}
            onChange={() => {
              setDisabledInput("");
              return;
            }}
          />
          <span className="mx-2">{a.answer}</span>
        </label>
    );
  };

  const radioBtnText = (a: SurveyAnswer, index: number) => {
    return (
        <label>
          <input
            autoFocus={index === 0}
            tabIndex={0}
            type="radio"
            className="form-radio"
            name="myRadio"
            value={a.answer}
            onFocus={(e) =>  {
              e.target.checked = true;
              handleChange((e.target as HTMLInputElement).value)
            }}
            onClick={() => setDisabledInput(a.answer)}
            onChange={() => {
              return;
            }}
          />
          <span className="mx-2">
            {a.answer}
            <input
              className="form-input rounded"
              tabIndex={0}
              type={"text"}
              disabled={disabledInput !== a.answer}
              onChange={(e) =>
                handleChange(a.answer + (e.target as HTMLInputElement).value)
              }
            ></input>
          </span>
        </label>
    );
  };
  return (
      <>
        {answers.map((a, index) => {
          return (
            <ul key={index}>
              {a.answerType === "option"
                ? radioBtn(a, index)
                : a.answerType === "optionText"
                ? radioBtnText(a, index)
                : null}
            </ul>
          );
        })}
      </>
  );
}

如有任何帮助，我们将不胜感激！

Answer 1

如果您有多个具有相同值的单选按钮，则使用

tabIndex={0}

可能不起作用。

当您启动

answers.map()

时，您可以创建一个用于设置唯一 tabIndex 值的变量：

const tabIndex = index + 1;

然后确保输入的 props 设置如下：

<input
  autoFocus={index === 0}
  tabIndex={tabIndex}
  className="form-radio"
  type="radio"
  name="myRadio"
  value={a.answer}
  onFocus={(e) => {
    e.target.checked = true;
    handleChange((e.target as HTMLInputElement).value);
  }}
  onClick={(e) => handleChange((e.target as HTMLInputElement).value)}
  onChange={() => {
    setDisabledInput("");
    return;
  }}
/>

我希望这有帮助！