企业建站有什么好处,晋中住房与城乡建设厅网站,wordpress 评论数量,网络营销模式下品牌推广途径背景 动态多个数据Controller包裹时候#xff0c;原生html标签input可以add时候自动获取焦点#xff0c;聚焦到最近不符合要求的元素上面 matiral的TextField同样可以可是x-date-pickers/DatePicker不可以❌ 是什么原因呢#xff0c;内部提供foucs#xff1f;#xff1f;属…背景 动态多个数据Controller包裹时候原生html标签input可以add时候自动获取焦点聚焦到最近不符合要求的元素上面 matiral的TextField同样可以可是x-date-pickers/DatePicker不可以❌ 是什么原因呢内部提供foucs属性才可以还是
暂时记录下问题还未解决 input图 input代码
直接用controller的fieldadd时候就可以给最前面一个没有有效输入的input获取焦点
input
key{field.id} // important to include key with fields id
{...field}
/
TextField图 TestField代码
必须用registercontroller的field无效没有add自动获取最前面无效输入的表单
TextField{...field}labelUsernamevariantoutlined{...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 ArraydefaultValue: {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}{/* inputkey{field.id} // important to include key with fields id{...register(test.${index}.value, {required: {value: true,message: required}})}/ */}{/* TextFieldkey{field.id} // important to include key with fields id{...register(test.${index}.value, {required: {value: true,message: required}})}/ */}Controllername{test.${index}.value}control{control}defaultValuerules{{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}// labelUsername// variantoutlined// {...register(test.${index}.value, {// required: {// value: true,// message: required// }// })}// ///二可以自动获取焦点// input// key{field.id} // important to include key with fields id// {...field}// ///三可以自动获取焦点// LocalizationProvider dateAdapter{AdapterDayjs} // DatePicker// {...field}// {...register(test.${index}.value, {// required: {// value: true,// message: required// }// })}// /// /LocalizationProvider)}}//div))}divbutton onClick{appendfile}add/button/divdivinput typesubmit //div/form);
}export default Form;
