- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 map 中使用多个输入,当我在 React Hooks 中单击输入时,我想将焦点设置为下一个输入。
在裁判的帮助下
我正在使用 Material ui 文本字段来获取输入
我尝试在没有 ref 的 react 类组件中工作,但在钩子(Hook)中它不起作用
类组件代码:
constructor(props) {
this.state = {}
}
inputRefs = [];
_handleKeyPress = e => {
const {currentTarget} = e;
let inputindex = this.inputRefs.indexOf(currentTarget)
if (inputindex < this.inputRefs.length - 1) {
this.inputRefs[inputindex + 1].focus()
}
else {
this.inputRefs[0].focus()
}
};
内部渲染在 map 功能中添加了这个
this.state.data.map((data) => return (
<TextField
inputProps = {{onKeyPress:(e) => this.function1(e, data)}}
onChange={this.changevaluefunction}
inputRef={ref => this.inputRefs.push(ref)}
onFocus={this.handleFocus} ref={`input${id}`} /> ))
最佳答案
我用功能组件以不同的方式实现了解决方案。我已经选择了 4 个字段,并用 createRef
设置了它的引用。钩。
我可以从您的解决方案中看到,您希望在按下 Enter
时将焦点移至下一个输入元素键在当前元素上。
我在 onKeyUp
中传递下一个目标元素参数处理程序连同实际事件,然后检测是否 Enter
键是否按下。如果 Enter
键被按下,targetElem
存在然后我将焦点转移到通过的targetElem
.通过这种方式,您可以更好地控制输入。
你可以在这里看到我的解决方案
https://codesandbox.io/s/friendly-leftpad-2nx91?file=/src/App.js
import React, { useRef } from "react";
import TextField from "@material-ui/core/TextField";
import "./styles.css";
const inputs = [
{
id: "fName",
label: "First Name"
},
{
id: "lName",
label: "Last Name"
},
{
id: "gender",
label: "Gender"
},
{
id: "address",
label: "Address"
}
];
export default function App() {
const myRefs = useRef([]);
const handleKeyUp = (e, targetElem) => {
if (e.key === "Enter" && targetElem) {
targetElem.focus();
}
};
return (
<div>
{inputs.map((ipt, i) => (
<TextField
onKeyUp={(e) =>
handleKeyUp(e, myRefs.current[i === inputs.length - 1 ? 0 : i + 1])
}
inputRef={(el) => (myRefs.current[i] = el)}
id={ipt.id}
fullWidth
style={{ marginBottom: 20 }}
label={ipt.label}
variant="outlined"
key={ipt.id}
/>
))}
</div>
);
}
关于javascript - 如何将焦点设置到下一个输入上的输入键按下 react js与refs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67782669/
我想读取帖子的数据并获取用户 key ,然后通过它进行搜索并同时获取用户数据,我尝试过,但它后退了一步,直到它才显示用户名我执行任何其他操作 这是帖子和经过身份验证的用户的 Firebase 实时数据
您知道是否有办法将 js ref 和 css ref 作为单个 ref 包含在 html 中?通常这些 ref 单独包含在 html head 中,但我的经理想知道下游消费者是否有一种简化的方法将这些
我正在使用 Swing+Clojure 开发一个 GUI 应用程序,它需要各种可变数据(例如滚动位置、用户数据、文件名、选定的工具选项等)。 我至少可以看到三种不同的处理这组数据的方式: 创建对所有数
我正在尝试通过 React 使用 ref 属性。我的浏览器出现奇怪的错误,但我无法弄清楚问题出在哪里。谁能向我解释一下为什么我会收到此错误: Error: Invariant Violation: a
在我的程序中,我有模板类,这些模板类主要是用于特殊目的 std::function 的包装器。最小的例子是: template class Foo { public: exp
如果被引用为参数的对象在函数中被修改,是否使用 ref 有关系吗?下面两个函数有区别吗? void DisposeObject(ClassThing c) { c.Dispose(); } vo
尝试将大型但线性的 svn 存储库迁移到 git。 svn 存储库没有标准布局(主干、分支、标签)...只有主干的一个目录。 Ubuntu 12.4 LTS,git 1.7.9.5。 $ git sv
您现在如何设置动态引用? 我收到一个错误 cannot set property of 'test' undefined ,如果我使用 this.someRef['test'] = ref;}/>
试图理解 gerrit 中的 refs/for/refs/* 功能。这个问题与 refs/for/master 无关。 我们什么时候可以使用这个 refs/for/refs/* 功能。 有人可以为此解
我以不同的方式调用 4 种方法时得到不同的结果: static void Main(string[] args) { var emp = new Employee { Name = "ABC"
假设我有以下内容: var t = typeof(Foo).MakeByRefType(); 有没有办法将结果转换回typeof(Foo)? 老实说,我发现的唯一方法是: var t = typeof
我以下列方式使用 ref。那么当在第 5 种方法中创建一个新对象时,是否会一直访问 main 方法中的原始 emp 并在那里创建一个新对象? 如果是,有没有一种方法可以实现相同的功能而无需多次迭代,即
我在文档的 html 标签内有一些文本。文字看起来像这样 I need this text <ref> Some unwanted text </ref> I need thi
一些背景: 前几天我遇到了一些事情,这让我开始思考嵌套函数调用中的重载解析。考虑以下代码: #include void printer(const int &a) { std::cout <<
如果直接从 this.refs 获取元素对象,那么为什么要使用 ReactDOM.findDOMNode? var HelloMessage = React.createClass({ click:f
我在这里做错了什么,或者从 C# 7.2 开始,不支持通过 ref 返回并允许设置的索引器? 作品: public ref byte this[int index] { get { r
看来我现在几乎每天都在这里问问题。我不确定这是好事还是坏事... 今天的“WTF flavor ”涉及我在使用来自 NI Measurement Studio 对象的函数时完全和完全无能为力。与我之前
这个问题在这里已经有了答案: Does foreach() iterate by reference? (10 个答案) Alternative to using ref in foreach? (
给定一个函数声明 dynamic DoSomething(dynamic inputObject) 我可以用枚举调用它作为inputObject: MyEnum myEnum; myEnum = Do
如果我将数组传递给函数并在函数内对数组进行更改,则函数外部存在的数组会反射(reflect)这些效果。例如: var myArr = [1, 2, 3]; function popAll(arr) {
我是一名优秀的程序员,十分优秀!