使用 react-hook-form 7.14.2。我有一個動態表單，我正在使用內置驗證。我感覺 react-hook-form 不能非常優雅地處理動態表單，我可能應該停止在這個問題上攪動，而回退到一個普通的 HTML 表單。
在驗證發生后，我只想專注于我正在輸入的欄位。這些欄位是必需的，但是在顯示驗證訊息并且我開始輸入之后，會發生重新渲染并且焦點會丟失在當前欄位上......它會跳回到表單中的最后一個欄位。這是一個笨重、糟糕的用戶體驗，我似乎無法找到技巧和技術的神奇組合來讓它像普通的 react-hook-form 表單一樣作業！
形式：
import React, { useEffect } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { Icon } from "@iconify/react";
import socials from "../../enum/social";
const SocialLinksEdit = props => {
const {
socialLinks,
onSave,
onCancel
} = props;
const { control, register, setValue, setFocus, handleSubmit, formState: { errors } } = useForm();
const { fields, append } = useFieldArray({
control,
name: "socialItems"
});
useEffect(() => {
Object.entries(socials).find(([, s]) => append(s));
}, []);
const getErrorMessage = i => {
if (!errors || Object.keys(errors).length === 0) {
return;
}
if (errors.socialItems && errors.socialItems[i]) {
return errors.socialItems[i].url.message;
}
return null;
};
const SocialItems = () => {
const onFocus = field => {
// setValue(e.target.value);
setFocus(field);
};
const onFocusOut = e => {
setValue(e.target.value);
};
return (
<>
{
fields.map((field, i) => {
let socialData = socialLinks.find(sl => sl.social_service === field.name);
console.log(errors);
return (
<div key={i} className="modal-input-field modal-input-mb">
<div className="modal-label-container">
<label className="modal-label">
<span className="modal-label-icon"><Icon icon={field.icon} /></span>
{field.label}
</label>
</div>
<input
type="text"
// autoFocus={i === 0}
ref={control}
autoFocus
// onFocus={() => onFocus(`socialItems.${i}.url`)}
// onFocusOut={onFocusOut}
{...register(`socialItems.${i}.url`, { required: "URL is required!" })}
defaultValue={socialData?.url}
/>
{errors && <span className="validation">{getErrorMessage(i)}</span>}
</div>
);
})
}
</>
);
};
return (
<div className="modal-container">
<div>
<form onSubmit={handleSubmit(onSave)}>
<div className="modal-title-container">
<div className="modal-title-icon"><Icon icon="bi:megaphone" /></div>
<div className="modal-title">Social Links</div>
</div>
<SocialItems />
<div className="modal-buttons">
<button type="submit" className="form-button-primary">Save</button>
<button type="button" className="form-button-cancel" onClick={e => onCancel(e)}>Cancel</button>
</div>
</form>
</div>
</div>
);
};
export default SocialLinksEdit;
一些“解釋”要做：
- 我在那里留下了一堆評論的東西，所以你可以看到我已經嘗試過的所有古怪的 Stack-O 建議——它們都不起作用。
- 我在加載時追加，因為 defaultValues 不起作用 - 沒有渲染
- 我只關心在欄位上注冊/系結的物件的“url”欄位
- 驗證訊息行被注釋掉了，因為我不確定用它做什么
這是有關其行為方式的快速視頻。如果我能讓該領域保持焦點而不是像這樣跳到底部領域，我會是一個快樂的人。
https://www.tiktok.com/@zambizzi/video/7093151720624147755?is_from_webapp=1&sender_device=pc&web_id=7039430208454280710
uj5u.com熱心網友回復：
事實證明，只是將欄位直接嵌套在內部，而不是在單獨的組件中，以防止重新渲染：
return (
<div className="modal-container">
<div>
<form onSubmit={handleSubmit(onSave)}>
<div className="modal-title-container">
<div className="modal-title-icon"><Icon icon="bi:megaphone" /></div>
<div className="modal-title">Social Links</div>
</div>
{
fields.map((field, i) => {
let socialData = socialLinks.find(sl => sl.social_service === field.name);
console.log(errors);
return (
<div key={i} className="modal-input-field modal-input-mb">
<div className="modal-label-container">
<label className="modal-label">
<span className="modal-label-icon"><Icon icon={field.icon} /></span>
{field.label}
</label>
</div>
<div>
<input
type="text"
autoFocus
{...register(`socialItems.${i}.url`, { required: "URL is required!" })}
defaultValue={socialData?.url}
/>
{errors && <span className="validation">{getErrorMessage(i)}</span>}
</div>
</div>
);
})
}
<div className="modal-buttons">
<button type="submit" className="form-button-primary">Save</button>
</div>
</form>
</div>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471290.html
標籤：javascript 反应 验证 反应挂钩形式
上一篇：如何防止數字輸入中的尾隨句點？
下一篇：php驗證不起作用的問題