草庐IT

javascript - 按回车键时关注下一个字段 React.js

coder 2024-05-10 原文

当我使用 React.js 在输入中单击输入时，我想找到一种方法来关注下一个字段

  @autobind
  handleKeyPress(event){
    if(event.key === 'Enter'){
      this.refs.email.focus();
    }
  }

  @autobind
  handleKeyPressEmail(event){
    if(event.key === 'Enter'){
      this.refs.zip_code.focus();
    }
  }

        <input
          onKeyPress={this.handleKeyPress}
          ref = 'name'
        />

        <input
          onKeyPress={this.handleKeyPressEmail}
          ref = 'email'
        />

        <input
          ref = 'zip_code'
        />

这是迄今为止我找到的最好方法，但是我不想每次都创建一个函数来重复自己的想法。有没有更好更简洁的方法来实现它？

最佳答案

如果<form>存在:

function handleEnter(event) {
  if (event.keyCode === 13) {
    const form = event.target.form;
    const index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    event.preventDefault();
  }
}
...
<form>
  <input onKeyDown={handleEnter} />
  <input onKeyDown={handleEnter} />
  <input />
</form>

CodePen

没有<form> :

function useFocusNext() {
  const controls = useRef([]);

  const handler = (event) => {
    if (event.keyCode === 13) {
      // Required if the controls can be reordered
      controls.current = controls.current
        .filter((control) => document.body.contains(control))
        .sort((a, b) =>
          a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
            ? -1 : 1
        );

      const index = controls.current.indexOf(event.target);
      const next = controls.current[index + 1];
      next && next.focus();

      // IE 9, 10
      event.preventDefault();
    }
  };

  return useCallback((element) => {
    if (element && !controls.current.includes(element)) {
      controls.current.push(element);
      element.addEventListener('keydown', handler);
    }
  }, []);
};

...
const focusNextRef = useFocusNext();

<input ref={focusNextRef} />
<input ref={focusNextRef} />
<button ref={focusNextRef}>Submit</button>

CodePen

关于javascript - 按回车键时关注下一个字段 React.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38577224/

javascriptReacteventcodecontrolsreactjs

有关javascript - 按回车键时关注下一个字段 React.js的更多相关文章

  1. SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之系统参数配置日志管理 - 2

    SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之系统参数配置日志管理1、系统参数配置SkeyeVSS系统参数配置页面如下图所示：其中包括：服务器名称标识为当前SkeyeVSS视频云系统平台的名称，一般以中心管理服务名称命名，也可以自定义设置名称唯一编码唯一编码与当前系统组织架构所属行政职能划分相关，比如当前SkeyeVSS视频云集群部署在四川省-成都市-武侯区，按照GB/T28181行政职能划分，其国标编码ID为51010700032008000001

  2. 小程序码的生成 - 2

    一、生成方式微信小程序提供了三个接口来生成小程序码，分别是wxacode.createQRCode()、wxacode.get()、wxacode.getUnlimited()，生成的小程序码永久有效，其中仅getUnlimited接口生成的小程序码数量暂无限制 二、接口详解1、wxacode.createQRCode参数：access_token(接口调用凭证)、path(扫码进入页面)、width(小程序码宽度)返回值：成功返回的图片Buffer，异常返回错误对象Object注意： 2、wxa

  3. c# - 是否可以将属性网格中显示的属性标记为密码字段 - 2

    我使用的是C#，并且有一个包含属性网格控件的Windows窗体。我已将propertygrid的SelectedObject分配给一个设置文件，该文件显示并允许我编辑设置。但是其中一个设置是密码-我希望它在字段中显示星号而不是密码设置的纯文本值。该字段在保存时将被加密，但我希望它表现得像一个普通的密码输入框，在用户输入密码时显示星号。我想知道是否有一个属性可以应用于设置属性以将其标记为密码？谢谢。 最佳答案 从.Net2开始，您可以使用PasswordPropertyTextAttribute附加到您的密码属性。希望这对您有所帮助。

  4. C#抽象类静态字段继承 - 2

    我觉得我跳过了一两节C#课，但这是我的困境:我有一个抽象类，我从中派生了多个子类。我确信对于每个子类我都会有一个构造函数，它需要一个特定的静态对象作为模型，并且这个对象对于每个子类都是不同的。我的第一个方法是在抽象父类中创建一个公共(public)静态对象，然后，在我开始创建子类的任何实例之前，我会为每个子类修改它，但事实证明，这样我实际上只为抽象类创建一个静态对象，它的每个子类都使用它。我该如何解决这个问题？更准确地说，这是伪代码:父抽象类:abstractclassAbstractClass{staticpublicModelObjectModel;...}子类之一:classCh

  5. c# - EntityFramework 6 如何通过反射获取身份字段？ - 2

    我有一个带有类型参数T的泛型方法，其中T是EF模型中的实体类型。我需要获得这种类型的标识字段的名称。我看到这篇文章:Isthereawaytogetentityid-field'snamebyreflectionorwhatever?但我不明白，Tevin在谈论EntitySetBase和EntityTypeBase类型时在谈论什么。如果EntityTypeBase是模型中实体之一的类型，那么EF6没有属性KeyMembers。 最佳答案 我认为仅通过反射获取主键是不可能的。首先，让我们看看EF如何确定哪些属性将成为主键，而

  6. c# - 字段初始值设定项不能引用非静态字段、方法或属性？ - 2

    我有一个存储库类和一个服务类，如下所示:publicclassDinnerRepository{DinnerDataContextdb=newDinnerDataContext();publicDinnerGetDinner(intid){returndb.Dinners.SingleOrDefault(d=>d.DinnerID==id);}//OthersCode}publicclassService{DinnerRepositoryrepo=newDinnerRepository();Dinnerdinner=repo.GetDinner(5);//OtherCode}这会

  7. c# - WPF 验证取决于必填/非必填字段 - 2

    我是WPF开发的新手，但我正在考虑如何用一block石头杀死3只鸟。示例:我有一个包含2个文本框和2个文本block的表单。第一个“鸟”将能够“丰富”一些带有星号的文本block，如果它们引用必填字段:<TextBlockGrid.Row="0"Grid.Column="0"Text="Age"customProperty="Required"/><TextBlockGrid.Row="1"Grid.Column="0"Text="FootSize/>然后Te

  8. c# - 由于静态字段初始化的顺序，如何捕获或标记潜在问题 - 2

    考虑以下C#代码:usingSystem;classProgram{staticstringstring1="AAA";staticstringstring2=string1+string3;staticstringstring3="BBB";staticvoidMain(){Console.WriteLine(string2);}}我今天早些时候写了一些这样的代码，并期望string2包含值AAABBB，但它只包含AAA。我阅读了一些有关静态变量初始化顺序的资料，但对我来说，编译期间会生成某种类型的警告或错误似乎更可取。两个问题:为什么允许这样的代码编

  9. c# - WCF:有没有办法删除 ExtensionData 字段？ - 2

    我刚开始使用WCF，我已经遇到了一个项目变更问题。我创建了一个服务并在web服务中放入引用，但是web服务xml文件中的每个字段都带有一个ExtensionData字段。例子:删除了无效的ImageShack链接我不想要这个。我只需要它:删除了无效的ImageShack链接有没有办法删除这个字段？某种不同类型的序列化？ 最佳答案 ExtensionData实际上是一个必须内置到类型中才能启用round-tripping的功能。.它始终由DataContractSerializer发出。抑制该字段的一种可能方法是使用较旧的XmlSer

  10. c# - 使用 iText (iTextSharp) 填充 PDF 中的 XFA 表单字段？ - 2

    我需要在PDF中填充XFA表单字段(使用Adob​​eLiveCycleDesigner创建)。我们正在尝试使用iText(实际上是带有C#的iTextSharp)来解析PDF，填充XFA字段，然后将修改后的PDF保存回来。我能在iText中找到的所有示例(很少有iTextSharp示例)都讨论了修改AcroForm字段。此PDF没有AcroForm字段并且仅使用XFA。任何非标准资源的指针都会有所帮助(我已经对该主题进行了必要的谷歌搜索，但没有发现任何有用的东西)。这里的代码示例对于任何实际完成过我正在尝试做的事情的人来说都会很棒。 最佳答案

随机推荐

  1. c# - 字符串构造器 - 2

    我们可以说，stringmyString="Hello";它“神奇地”构造了一个包含该值的新字符串对象。为什么不能将类似的“无构造”方法用于从我们在代码中定义的类创建的对象？VS对string的“魔力”是什么？而对于enum呢？我从未见过有关其工作原理的解释。 最佳答案 基本上，它是C#语言规范的一部分:有字符串文字、数字文字、字rune字和bool文字的语法，但仅此而已。编译器使用这些文字来生成IL，对于大多数，“特定类型的常量”都有合适的指令，因此直接表示。decimal是一个异常(exception)，它不是C

  2. c# - 长整数可以在 32 位系统上工作吗？ - 2

    如果我理解正确的话，一个int变量正在保存32位，将它限制在-20亿到20亿之间。但是，如果我使用长变量，它将保存为64位，从而可以存储更多数字。我使用的是64位系统，但如果我以64位存储数据，我的代码能否在32位系统上正常运行？谢谢! 最佳答案 你不用担心这个。long值将存储在2个内存地址中。Int64/long将始终为64位，而Int32/int将始终为32位。有一些影响(关于内存空间和性能)，但最值得注意的可能是写/读操作在32位系统上不是原子的，但你不应该期望它们无论如何都是原子的，因为c#规范不提供此类保证。无论哪种方式

  3. c# - 使用 Moq 模拟 Delegate.Invoke() 在 LINQ 中抛出 InvalidCast 异常 - 2

    假设我有IService界面:publicinterfaceIService{stringName{get;set;}}还有一个委托(delegate)Func<IService>返回此接口(interface)。在我的单元测试中，我想模拟委托(delegate)的Invoke()像这样使用Moq的方法:[TestMethod]publicvoidUnitTest(){varmockService=newMock<IService>();varmockDelegate=newMock<Func<IService>>();mockDeleg

  4. c# - 无法找到请求的 .Net Framework 数据提供程序。它可能没有安装 - 2

    大家好，这是我第一次在远程服务器上发布使用EntityFramework开发的项目。这些页面工作正常，但是当我尝试访问我的保留区域时，读取数据库时，我收到此错误Unabletofindtherequested.NetFrameworkDataProvider.Itmaynotbeinstalled.描述:在执行当前网络请求期间发生未处理的异常。请查看堆栈跟踪以获取有关错误及其在代码中的来源的更多信息。异常详细信息:System.ArgumentException:无法找到请求的.NetFramework数据提供程序。它可能未安装。来源错误:在执行当前Web请求期间生成了未处理的异常。可

  5. c# - 将 Datagrid.SelectedItems 集合转换到 List<T> - 2

    我有这样的课publicclassFoo{publicstringprop1{get;set;}publicstringprop2{get;set;}}还有一个带有List<Foo>的View模型,此列表用作Bind一个DataGrid，然后在代码隐藏中我需要获取Datagrid.SelectedItems收集并将其转换为List<Foo>我尝试过的事情:List<Foo>SelectedItemsList=(List<Foo>)DataGrid.SelectedItems;//ORobjectp=DataGrid.SelectedIte

  6. c# - 如何使用 LINQ 从 DataTable 中删除行？ - 2

    我有以下代码从DataTable中删除行:varrows=dTable.Select("col1='ali'");foreach(varrowinrows)row.Delete();上面的代码工作正常。如何将此代码转换为LINQ？ 最佳答案 LINQ不用于删除或修改-它用于查询数据。使用LINQ，您可以选择应删除的数据，然后手动删除这些数据(例如，在foreach循环中或使用ForEach列表扩展):varquery=dTable.AsEnumerable().Where(r=>r.Field&

  7. C# SQLite-net 定义多列唯一 - 2

    我看到了对SQLite-net中支持多列唯一约束的更改的引用。我知道它可以直接用sqlite完成，但是我更喜欢使用sqlite-net方法来做事。什么是做多列唯一的语法。Single是希望唯一的列上方的[Unique]。 最佳答案 我通过查看项目中包含的实际单元测试找到了答案。它基于在索引属性上使用命名参数。例如:[Indexed(Name="ListingID",Order=2,Unique=true)]publicstringListingNumber{get;set;}[Indexed(Name="Li

  8. c# - List.Insert 有任何性能损失吗？ - 2

    给定一个列表:List<object>SomeList=newList<object>();正在做:SomeList.Insert(i,val);对比SomeList.Add(val);有任何性能损失吗？如果是，如何取决于:-i-插入索引-SomeList.Count-列表的大小 最佳答案 TheListclassisthegenericequivalentoftheArrayListclass.ItimplementstheIListgenericinterfaceusinganarraywhosesize

  9. c# - 提高使用 .NET 枚举文件和文件夹的性能 - 2

    我有一个包含数千个文件夹的基本目录。在这些文件夹中，可以有1到20个子文件夹，其中包含1到10个文件。我想删除所有超过60天的文件。我使用下面的代码来获取我必须删除的文件列表:DirectoryInfodirInfo=newDirectoryInfo(myBaseDirectory);FileInfo[]oldFiles=dirInfo.GetFiles("*.*",SearchOption.AllDirectories).Where(t=>t.CreationTime<DateTime.Now.AddDays(-60)).ToArray();但是我让它运行

  10. c# - 智能字符串比较 - 2

    我正在寻找一个允许对两个字符串进行智能比较的库/类。充其量它会给出两个字符串相似程度的百分比。我正在比较记录在不同存储库中的公司名称、地址，因此名称中有很多拼写错误或不一致。要比较的示例字符串:"GoodCompanyLtd."vs."GoodCompany""BakerStreet2"vs."BakerStr.2"如果我得到相似百分比的结果，那么这可以作为此类数据智能合并的输入。你知道有什么好的库可以进行这种智能字符串比较吗？ 最佳答案 Levenshtein在这种情