Javascript 不应使用来自.map的索引

为什么索引只是最后选择的索引？请参阅注释行中发送的索引

  <Ol
    width={small && "100%"}
    role="listbox"
    tabindex={stepIndex}
    aria-activedescendant={steps[stepIndex]}
    // aria-labelledby="accordion_form"
  >
    {steps.map((step, index) => (
      <li
        className={getClassName(index)}
        role="option"
        tabindex="0"
        onKeyDown={handleSelectOnKeyDown(index)} // This index is always the same, even though I list out 1, 2 3 on the commented line underneath
        onClick={() => setNextStep(step)}
        id={step}
        aria-selected={steps[stepIndex] === step ? "true" : "false"}
      >
        <span>
          {index + 1}. {schema[step]?.label ?? titleizeWord(step)} // Here it is listed out 1, 2, 3 (with the added +1), so the index is correct here.
        </span>
        {index < stepIndex && <Icon icon={check} left="small" />}
        {small && index === stepIndex && (
          <Icon icon={chevron_down} left="small" />
        )}
      </li>
    ))}
  </Ol>

{steps.map（（步骤，索引）=>(
setNextStep（步骤）}
id={step}
所选aria={steps[stepIndex]==步骤？“true”：“false”}
>
{index+1}.{schema[step]？.label？？titleizeWord（step）}//这里列出了1、2、3（添加了+1），所以这里的索引是正确的。
{index
))}

这是handleSelectOnKeyDown：

  const handleSelectOnKeyDown = (index) => ({ keyCode }) => {
    console.log("index", index);
    let nextStep;
    switch (keyCode) {
      case KEYS.ENTER:
      case KEYS.SPACE:
        nextStep = steps[index];
        break;
      case KEYS.UP:
        const upIndex = index > 0 ? index - 1 : 0;
        nextStep = steps[upIndex];
        break;
      case KEYS.DOWN:
        const maxIndex = steps?.length;
        const downIndex = index < (maxIndex - 1) ? index + 1 : maxIndex;
        nextStep = steps[downIndex];
        break;
      default:
        return;
    }

    if (nextStep) {
      setNextStep(nextStep);
    }
  };

const handleselectionkeydown=（index）=>（{keyCode}）=>{
控制台日志（“索引”，索引）；
让我们下一步；
开关（钥匙代码）{
case key.ENTER：
case key.SPACE：
下一步=步骤[索引]；
打破
case key.UP：
常数upIndex=指数>0？指数-1:0；
下一步=步数[upIndex]；
打破
case key.DOWN：
常量maxIndex=步长？长度；
常数downIndex=索引<（maxIndex-1）？索引+1:maxIndex；
下一步=步数[向下索引]；
打破
违约：
返回；
}
如果（下一步）{
设置下一步（下一步）；
}
};

---

我想得到一个可能导致这种情况的解释。

我认为您的实现需要从

onKeyDown

更改为

onkeydup

。我这样假设是因为当从一个

li

项目导航到另一个项目时，您的事件将发生在

keydown

上，但您的新焦点元素将在控制台中登录的内容（发生在keydown上）的前面或后面一个索引

因此，简而言之，keydown将在您离开当前元素时执行，而keydup将在您到达它时执行

同样，当谈到离开和到达时，使用的是导航键。对于其他键，因为它们不执行导航，

索引

值将与聚焦的内容一致，而不管是使用了keydown还是keydup

尝试以下沙盒：-

---

我想澄清一件事。我的回答目前假设您希望获取关键事件上当前焦点元素的索引（使用tab/shift+tab）。但是在重新阅读您的问题之后，您是否期望在JSX中执行

index+1

也会将发送给事件处理程序的

index

增加1？如果是这样的话，那就不会发生，因为您没有更改

索引本身，只是在使用它。让我知道这是否是问题所在，我将删除我的答案。