react-hook-form。 useFieldArray Controller 必填,报错自动获取较多疑问记录

背景

动态多个数据Controller包裹时候,原生html标签input可以add时候自动获取焦点,聚焦到最近不符合要求的元素上面

  • matiral的TextField同样可以
  • 可是x-date-pickers/DatePicker不可以❌

是什么原因呢,内部提供foucs??属性才可以,还是?

暂时记录下,问题还未解决

input图:

input代码:

直接用controller的field,add时候就可以给最前面一个没有有效输入的input获取焦点

<input
key={field.id} // important to include key with field's id
{...field}
/>
TextField图:

TestField代码:

必须用register,controller的field无效(没有add自动获取最前面无效输入的表单)

<TextField
                                    {...field}
                                    label="Username"
                                    variant="outlined"
                                    {...register(`test.${index}.value`, {
                                        required: {
                                            value: true,
                                            message: "required"
                                        }
                                    })}
                                />
x-data-picker

用controller的fields或者regiter都无效

完整代码
import { useForm, Controller, useFieldArray } from "react-hook-form";
import { TextField } from "@mui/material";
import { useEffect } from "react"
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
function Form() {
    const { register, setFocus, control, handleSubmit, formState: { errors, isDirty }, formState } = useForm();
    const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
        control, // control props comes from useForm (optional: if you are using FormContext)
        name: "test", // unique name for your Field Array
        defaultValue: {
            test: [
                {
                    value: 100
                }
            ]
        }
    });

    const onSubmit = (data) => {
        console.log("data", data);
    };
    // console.log("errors", errors)
    useEffect(() => {
        // const firstError = Object.keys(errors).reduce((field, a) => {
        //     return !!errors[field] ? field : a;
        // }, null);
        // console.log("firstError", firstError)
        // if (firstError) {
        //     setFocus(firstError);
        // }
        // console.log("errors.test[0]", formState.errors)
        // if (errors.test && errors.test[0]?.value?.ref) {
        //     console.log(" errors.test[0].value.ref", errors.test[0].value.ref)
        //     //errors.test[0].value.ref.focus()
        //     setFocus(`test.${0}.value`)
        // }

    }, [errors, formState]);
    const appendfile = () => {
        append({
            value: ""
        })
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <p>{String(isDirty)}</p>
            {fields.map((field, index) => (
                <div key={field.id}>
                    {/* <input
                        key={field.id} // important to include key with field's id
                        {...register(`test.${index}.value`, {
                            required: {
                                value: true,
                                message: "required"
                            }
                        })}
                    /> */}

                    {/* <TextField
                        key={field.id} // important to include key with field's id
                        {...register(`test.${index}.value`, {
                            required: {
                                value: true,
                                message: "required"
                            }
                        })}
                    /> */}


                    <Controller
                        name={`test.${index}.value`}
                        control={control}
                        defaultValue=""
                        rules={{
                            required: {
                                value: true,
                                message: "required"
                            }
                        }}
                        errors={isDirty && errors.test && errors.test[index] && errors.test[index].value.message ? true : false}
                        render={({ field }) => {
                            console.log("field", field)
                            //     required: {
                            //         value: true,
                            //         message: "required"
                            //     }
                            // }))

                            return (
                                //一,可以自动获取焦点

                                // <TextField
                                //     {...field}
                                //     label="Username"
                                //     variant="outlined"
                                //     {...register(`test.${index}.value`, {
                                //         required: {
                                //             value: true,
                                //             message: "required"
                                //         }
                                //     })}
                                // />
                                //二,可以自动获取焦点
                                // <input
                                //     key={field.id} // important to include key with field's id
                                //     {...field}
                                // />
                                //三,可以自动获取焦点
                                // < LocalizationProvider dateAdapter={AdapterDayjs} >
                                //     <DatePicker
                                //         {...field}
                                //         {...register(`test.${index}.value`, {
                                //             required: {
                                //                 value: true,
                                //                 message: "required"
                                //             }
                                //         })}
                                //     />
                                // </LocalizationProvider>
                            )
                        }}
                    />


                </div>
            ))}
            <div>
                <button onClick={appendfile}>add</button>
            </div>

            <div>
                <input type="submit" />
            </div>
        </form>
    );
}

export default Form;

append 后不自动focus

lib版本:7.47.0 ,一下代码window 谷歌可行,苹果谷歌不可行

append({
            value: "",
            time: null
        }, {
            shouldFocus: false,
})
isduty在提交后,依旧是true,如何解决:
 React.useEffect(() => {
    if (isSubmitted) {
      reset({}, { keepValues: true });
    }
  }, [isSubmitted, reset]);

代码:React Hook Form - useForm Template (forked) - CodeSandbox

注意必须通过handleSubmit(handler) handleSubmit函数来包裹提交函数

参考:

isDirty is not set to false after successful submission · Issue #3097 · react-hook-form/react-hook-form · GitHub

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/114235.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

这才是当今生成式人工智能的根本性问题!

原创 | 文 BFT机器人 01 引言 近年来&#xff0c;生成式人工智能产品层出不穷&#xff0c;ChatGPT火爆出圈后&#xff0c;百度、谷歌等科技大佬争相研究生成式人工智能产品&#xff0c;将该技术的普及程度提升到了一个新的水平。然而&#xff0c;生成式人工智能的运营需要高昂…

【Redis】入门篇--安装以及常用命令

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Redis的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Redis是什么 二. Redis有什么优势 三…

谷歌浏览器解决跨域问题配置记录

在访问时出现has been blocked by CORS policy: Responspreflight request doesn’t pass access control checlAccess-Control-A1low-Origin" header is present onrequested resource. 出现跨域问题 1.先关闭浏览器 2.创建一个目录&#xff0c;文件夹记住路径 3.点击谷…

强化学习的动态规划

一、动态规划 动态规划&#xff08;DP&#xff09;一词指的是一系列算法&#xff0c;这些算法可用于在给定环境的完美模型作为马尔可夫决策过程&#xff08;MDP&#xff09;的情况下计算最优策略。经典的DP算法在强化学习中具有有限的实用性&#xff0c;既因为其对完美模型的假…

开源播放器GSYVideoPlayer的简单介绍及播放rtsp流的优化

开源播放器GSYVideoPlayer的简单介绍及播放rtsp流的优化 前言一、GSYVideoPlayer&#x1f525;&#x1f525;&#x1f525;是什么&#xff1f;二、简单使用1.First、在project下的build.gradle添加2.按需导入3. 常用代码 rtsp流的优化大功告成 总结 前言 本文介绍&#xff0c;…

Uni-App 快捷登录

uniapp 实现一键登录前置条件: 开通uniCloud, 开通一键登录功能参考的文档 : 官网 - 一键登录uniapp指南 : https://uniapp.dcloud.net.cn/univerify.html#%E6%A6%82%E8%BF%B0 官网 - 一键登录开通指南 : https://ask.dcloud.net.cn/article/37965 官网 - unicloud使用指南 htt…

Greenplum管理和监控工具-gpcc-web介绍

Greenplum管理和监控工具-gpcc-web介绍 1. gpcc-web简介 ​ gpcc&#xff08;Greenplum Command Center&#xff09;的Web用户界面是一个强大的工具&#xff0c;它可以帮助用户管理Greenplum数据库集群&#xff0c;提高效率&#xff0c;优化性能&#xff0c;并确保数据的安全…

应用场景由点及面,大模型在银行业落地的方法|案例研究

自2022年11月面世以来&#xff0c;ChatGPT已经吸引了全球范围内的广泛关注。其底层技术大模型&#xff0c;也获得了银行业自上而下所有人员前所未有的关注度。 01 相较于传统AI小模型&#xff0c;大模型具有以下三大核心优势&#xff1a;效率提升&#xff0c;个性化输出和交互…

二维码智慧门牌管理系统升级解决方案:让门牌安装任务更加智能化

文章目录 前言一、任务地图和任务领取二、贴牌作业和提交作业三、优势与效益四、自媒体平台的吸引力 前言 随着科技的不断发展&#xff0c;智能化管理在各个领域的应用越来越广泛。在门牌安装领域&#xff0c;二维码智慧门牌管理系统已经成为了一种新的升级解决方案&#xff0…

什么样的耳机适合跑步?适合跑步佩戴的无线耳机推荐

​无论是在烈日炎炎的夏天&#xff0c;还是在寒风刺骨的冬天里健身运动&#xff0c;只要打开音乐就能沉浸其中。运动耳机不仅佩戴稳固舒适&#xff0c;还能提供高品质音质表现。无论在哪里&#xff0c;无论何时&#xff0c;只要打开音乐&#xff0c;你就可以找到你的节奏&#…

日本移动支付Merpay QA团队的自动化现状

Merpay是日本最大的网购平台之一Mercari的无现金支付系统。Merpay 的主要功能是让用户在 Mercari的网站上购物&#xff0c;也可以在日本的许多实体店和餐厅使用它&#xff0c;也可以理解为日本的“支付宝”。以下为Merpay QA 团队在自动化方面的一些思考&#xff1a; 这几年&am…

AI、万圣节与聊斋;用AI写甜蜜恋爱小暖文;AGI新趋势与机会洞察;Meta官方Llama 2入门指南 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f440; 时代杂志评选2023年度最佳发明&#xff0c;AI赛道入选名单 https://time.com/collection/best-inventions-2023 10 月 24 日&#xff…

【排序算法】 计数排序(非比较排序)详解!了解哈希思想!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️计数排序的概念☁️什么是计数排序&#xff1f;☁️计数排序思想⭐绝对…

安全第一!速卖通测评补单稳定的系统注意事项大盘点

对新卖家而言&#xff0c;测评并非可耻之事&#xff0c;反而是无法起步、耗费自身时间才是真正的可耻。由于速卖通新店几乎无法获得任何活动的支持&#xff0c;流量也基本没有&#xff0c;因此要在90天内达成60单的业绩对于许多卖家来说都是一项挑战。因此&#xff0c;通过快速…

将一个Series序列转化为数据框Dataframe格式Series.to_frame()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将一个Series序列 转化为Dataframe格式 Series.to_frame() [太阳]选择题 关于以下代码的说法中正确的是? import pandas as pd s pd.Series([1,2],name"myValue") print("【显…

了解数据库设计,轻轻松松提高工作效率

每个应用程序&#xff0c;无论大小&#xff0c;最终都需要一个数据库来持久保存所有重要数据。对此没有任何争论&#xff01; 什么是数据库设计&#xff1f; 数据库设计是帮助创建、实施和维护企业数据管理系统的一系列步骤的集合。设计数据库的主要目的是为所建议的数据库系统…

单元测试,集成测试,系统测试的区别是什么?

实际的测试工作当中&#xff0c;我们会从不同的角度对软件测试的活动进行分类&#xff0c;题主说的“单元测试&#xff0c;集成测试&#xff0c;系统测试”&#xff0c;是按照开发阶段进行测试活动的划分。这种划分完整的分类&#xff0c;其实是分为四种“单元测试&#xff0c;…

锐捷RG-EW1200G登录绕过漏洞复现

文章目录 锐捷RG-EW1200G登录绕过漏洞复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.复现 0x06 修复建议 锐捷RG-EW1200G登录绕过漏洞复现 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、…

vue-admin-template 安装遇到的问题

vue-element-admin 是一个后台前端解决方案&#xff0c;它基于 vue 和 element-ui实现。 参考文档&#xff1a; 官网&#xff1a; https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD遇到的问题&#xff1a; npm ERR! Error while executing…

基于JAVA+SpringBoot+Vue的前后端分离的大学生创新作品审核平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着大学教育的发展&a…