首页 > 其他分享 >可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置

可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置

时间:2024-03-17 22:57:22浏览次数:27  
标签:current const 焦时 form 编辑表格 value react hook

可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置

在React项目中,要实现在一个可编辑表格中,当开始时间列输入后失焦或按下Enter键时,自动将焦点切换至结束时间列,你可以结合使用react-hook-formregister方法与DOM原生的focus方法,以及onBluronKeyDown事件处理函数。以下是一个大致的实现方案:

import React, { useRef } from 'react';
import { InputNumber } from 'antd';
import { useController } from 'react-hook-form';

interface TableRowData {
  startTime: number;
  endTime: number;
  // ...其他字段
}

const EditableCell: React.FC<{ rowData: TableRowData }> = ({ rowData }) => {
  const startTimeRef = useRef<InputNumber>(null);
  const endTimeRef = useRef<InputNumber>(null);

  const { control } = useFormContext();

  // 注册startTime字段
  const { field } = useController({
    name: 'startTime',
    control,
    defaultValue: rowData.startTime,
  });

  // 添加失焦事件处理
  const handleStartTimeBlur = () => {
    if (startTimeRef.current && endTimeRef.current) {
      endTimeRef.current.focus();
    }
  };

  // 添加键盘按下Enter事件处理
  const handleStartTimeKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      event.preventDefault(); // 阻止表单默认提交行为
      if (endTimeRef.current) {
        endTimeRef.current.focus();
      }
    }
  };

  return (
    <>
      <InputNumber
        ref={startTimeRef}
        {...field}
        onBlur={handleStartTimeBlur}
        onKeyDown={handleStartTimeKeyDown}
        formatter={(value) => `${value.toFixed(2)}`}
        parser={(value) => parseFloat(value.replace(/[^\d.]/g, ''))}
        min={0}
        max={9999.00}
      />
      
      <InputNumber
        ref={endTimeRef}
        {...useController({
          name: 'endTime',
          control,
          defaultValue: rowData.endTime,
        }).field}
        formatter={(value) => `${value.toFixed(2)}`}
        parser={(value) => parseFloat(value.replace(/[^\d.]/g, ''))}
        min={0}
        max={9999.00}
      />
    </>
  );
};

这样当开始时间InputNumber失去焦点或用户按下Enter键时,焦点会自动转移到结束时间的InputNumber上。同时,别忘了在包裹这两个列的外层组件中使用FormProvider来提供react-hook-form的上下文。

标签:current,const,焦时,form,编辑表格,value,react,hook
From: https://www.cnblogs.com/longmo666/p/18079374

相关文章

  • 滴水逆向笔记系列-win32总结10-63.IAT HOOK-64.Inline HOOK
    第六十三课IATHOOK这节课得把前面PE部分的IAT表复习好,再来做就简单多了1.IATHOOK是什么其实就是找到IAT表的位置再换成自己定义的函数,只是我们替换的函数需要和原函数的结构保持一直,比如我们要HOOKMessagebox函数,那么我们需要定义一个MyMessagebox函数,他的结构应该与Messa......
  • imagepolicywebhook
    imagePolicyWebhookimagePolicyWebhook是一个评估image的准入控制器。需要启动一个https的服务来执行该动作【功能实践】为webhook生成ssl证书生成server.csr和server-key.pemcat<<EOF|cfsslgenkey-|cfssljson-bareserver{"hosts":["image-bouncer-......
  • React-hook-form-mui(二):表单数据处理
    前言在上一篇文章中,我们介绍了react-hook-form-mui的基础用法。本文将着表单数据处理。react-hook-form-mui提供了丰富的表单数据处理功能,可以通过watch属性来获取表单数据。Demo下面是一个使用watch属性的例子:importReactfrom'react';import{useForm}from're......
  • .Net 创建webhooks Demo,可用于Gitlab等Workflow
    框架:.Net6、webapipackage:GitLabApiClient定义body参数DTO,不同event有不同的参数,具体可参考gitlab文档:https://docs.gitlab.com/ee/user/project/integrations/webhook_events.htmlpublicclassGitLabWebhookData{publicstringRef{get;set;}publicstring......
  • LAYUI - 可编辑表格
    代码/*防止下拉框的下拉列表被隐藏---必须设置---*/.layui-table-cell{overflow:visible;}.layui-table-box{overflow:visible;}.layui-table-body{overflow:visible;}/*使得下拉框与单元格刚好合适*/td.layui-form-select{margin-top:-10px;margin-le......
  • a-modal使用hooks封装状态逻辑并添加全屏切换效果
    /hooks/useModal.jsimport{nextTick,ref}from'vue'import{isFunction}from"lodash-es";exportfunctionuseModal(){ //标题 //执行ok、cancel方法 constvisible=ref(false) constloading=ref(false) consthideModal=()=>{......
  • React Hooks 钩子特性及应用场景
    Hooks是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性。ReactHooks表现形式是以use开头的函数被称为Hook。useState是React提供的一个内置Hook。你可以在ReactAPI参考中找到其他内置的Hook。你也可以通过组合......
  • React 高阶组件、Render props、hooks 有什么区别?
    这三者是目前react解决代码复用的主要方式:高阶组件(hoc)官方解释:高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是ReactAPI的一部分,它是一种基于React的组合特性而形成的设计模式。简言之,HOC是一种组件的设计模式,HOC接受一个组件和额外的......
  • 自定义Hooks:四个典型的使用场景
    一、如何用好hook要用好ReactHooks,很重要的一点,就是要能够从Hooks的角度去思考问题。要做到这一点其实也不难,就是在遇到一个功能开发的需求时,首先问自己一个问题:这个功能中的哪些逻辑可以抽出来成为独立的Hooks?这样问的目的,是为了让我们尽可能的吧业务陆奥及拆分......
  • React的7个常用Hooks及使用场景(含示例)
    React是一款非常流行的JavaScript库,它提供了许多Hooks,用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例:No1、useStateuseState用于在函数组件中管理状态。它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值......