我想实现 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;
最佳答案
我设法让它与 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 (
<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;
关于javascript - 如何在功能组件中将下一个输入集中在按下回车键上? (TAB 行为),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58869515/