如何在函数组件中在按下回车键时将焦点置于下一个输入框？（类似TAB的行为）

14 浏览
0 Comments

如何在函数组件中在按下回车键时将焦点置于下一个输入框？（类似TAB的行为）

我想实现TAB的行为，但是使用回车键触发。

以下是我尝试解决这个问题的方式，但由于没有使用Refs，它不能工作。

我的想法是在每个输入框中声明下一个应该聚焦的元素，并且通过Enter键松开事件来设置该值为新的聚焦字段。

我看过使用useHook的示例，但我不知道如何使用它，而不需要为每个输入框拥有大量的useState。

以下是该代码的沙盒版本。

import React, { useState, useEffect } from "react";
function Form(props) {
  // Holds the ID of the focused element
  const [focusedElementId, setFocusedElementId] = useState("input-one");
  // The actual focusing, after each re-render
  useEffect(() => {
    document.getElementById(focusedElementId).focus();
  }, []);
  useEffect(() => {
    console.log("STATE:", focusedElementId);
  }, [focusedElementId]);
  // When Enter is pressed, set the focused state to the next element ID provided in each input
  function handleKeyUp(e) {
    e.which = e.which || e.keyCode;
    if (e.which == 13) {
      let nextElementId = e.target.attributes["data-focus"].value;
      console.log(`HANDLER: Enter - focusing ${nextElementId}`);
      setFocusedElementId(nextElementId);
    }
  }
  return (
          
          
          
          
          
          
          
          
          
  );
}
export default Form;

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

这是一个更可扩展的版本; 只需将其附加到容器元素即可:

function onKeyDown(e) {
    if (e.key === 'Enter') {
      const fields =
        Array.from(e.currentTarget.querySelectorAll('input')) ||
        []
      const position = fields.indexOf(
        e.target // as HTMLInputElement (for TypeScript)
      )
      fields[position + 1] && fields[position + 1].focus()
    }
  }

0
0 Comments

我已经用refs使它工作了。

这是沙盒的链接。

它看起来很简单和清洁，但我仍然对你的意见感到好奇。

import React from "react";
function Form() {
  let one = React.createRef();
  let two = React.createRef();
  let three = React.createRef();
  // When Enter is pressed, set the focused state to the next element ID provided in each input
  function handleKeyUp(e) {
    e.which = e.which || e.keyCode;
    // If the key press is Enter
    if (e.which == 13) {
      switch (e.target.id) {
        case "input-one":
          two.current.focus();
          break;
        case "input-two":
          three.current.focus();
          break;
        case "input-three":
          one.current.focus();
          break;
        default:
          break;
      }
    }
  }
  return (
          
          
          
          
          
          
          
          
          
  );
}
export default Form;

0