javascript - 如何在功能组件中将下一个输入集中在按下回车键上？ (TAB 行为)

Question

我想实现 TAB 行为，但要按 ENTER。

这是我尝试解决它的方法，但由于未使用 Refs 而无法解决。

我的想法是在每个输入中声明下一个应该聚焦的元素，然后 Enter keyup 事件处理程序将该值设置为新的聚焦字段。

我看过 examples using useHook但我不知道如何使用它，除非为每个输入发送大量 useState。

Here is a Sandbox of the code below .

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 (
    <div>
      <div className="form-items" style={{ display: "flex" }}>

        <div className="input-group">
          <label>{"Input One"}</label>
          <br />
          <input
            type={"text"}
            id={"input-one"}
            onKeyUp={handleKeyUp}
            data-focus={"input-two"}
          />
        </div>

        <div className="input-group">
          <label>{"Input Two"}</label>
          <br />
          <input
            type={"text"}
            id={"input-two"}
            onKeyUp={handleKeyUp}
            data-focus={"input-three"}
          />
        </div>

        <div className="input-group">
          <label>{"Input Three"}</label>
          <br />
          <input
            type={"text"}
            id={"input-three"}
            onKeyUp={handleKeyUp}
            data-focus={"input-one"}
          />
        </div>

      </div>
    </div>
  );
}

export default Form;

Answer 1

我设法让它与 refs 一起工作。

Here's the sandbox .

看起来足够简洁干净，但我还是很好奇大家的看法。

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 (
    <div>
      <div className="form-items" style={{ display: "flex" }}>
        <div className="input-group">
          <label>{"Input One"}</label>
          <br />
          <input
            type={"text"}
            id={"input-one"}
            onKeyUp={handleKeyUp}
            ref={one}
          />
        </div>

        <div className="input-group">
          <label>{"Input Two"}</label>
          <br />
          <input
            type={"text"}
            id={"input-two"}
            onKeyUp={handleKeyUp}
            ref={two}
          />
        </div>

        <div className="input-group">
          <label>{"Input Three"}</label>
          <br />
          <input
            type={"text"}
            id={"input-three"}
            onKeyUp={handleKeyUp}
            ref={three}
          />
        </div>
      </div>
    </div>
  );
}

export default Form;