у меня есть компонент для отправки нового поста на сервер. Я использую React TS react-hook-forms и yup. Мне нужно получать ref на оба инпута, которые я пытаюсь валидировать, поэтому я использую useControl и свой ref, при этом я получаю ошибку ‘ref’ is specified more than once, so this usage will be overwritten.ts(2783)
addPost.tsx(127, 13): This spread always overwrites this property.
const inputRef: React.RefObject<HTMLInputElement>
вот мой код
так я регистрирую
const {
register,
control,
handleSubmit,
formState: { errors },
} = useForm<IRequestPost>({
resolver: yupResolver(addPostSchema),
});
// Создаем useRef для input text
const inputRef = useRef<HTMLInputElement>(null);
// Используем useController для управления input text
const {
field: { ...inputProps },
fieldState: { error: inputError },
} = useController({
name: "text",
control,
defaultValue: "",
});
// Создаем useRef для input file
const fileInputRef = useRef<HTMLInputElement>(null);
// Используем useController для управления input file
const {
field: { ...fileInputProps },
fieldState: { error: fileInputError },
} = useController({
name: "attachments",
control,
defaultValue: [], // Или [], если attachments - массив
});
пара функций, где мне необходимо использовать свой ref
const divRef = React.useRef<HTMLDivElement>(null);
const addTagInPost = () => {
const inputValue = inputRef.current?.value.trim(); // Используем inputRef.current
if (inputValue) {
dispatch(onAddToTags(inputValue));
if (inputRef.current) {
// Используем inputRef.current
inputRef.current.value = "";
}
}
};
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (divRef.current && !divRef.current.contains(event.target as Node)) {
setIsVisible(false);
} else {
setIsVisible(true);
}
};
document.addEventListener("click", handleClickOutside);
return () => {
document.removeEventListener("click", handleClickOutside);
};
}, [isVisible]);
остальной код компонента
return (
<div className={styles.root} ref={divRef}>
<form onSubmit={handleSubmit(onSubmit)}>
<div className={styles.text}>
<img src="src/assets/utilsIcon/userDefaultImg.svg" alt="" />
<input
type="text"
ref={inputRef} // тут возникает ошибка 'ref' is specified more than once, so this usage will be overwritten.ts(2783) addPost.tsx(127, 13): This spread always overwrites this property. const inputRef: React.RefObject<HTMLInputElement>
placeholder="Что нового?"
{...inputProps} // Передаем свойства от useController
/>
<div className={styles.added}>
<svg
onClick={() => fileInputRef.current?.click()} // Используем fileInputRef.current
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 555.073 555.073"
>
<g>
<path d="M60.629,498.186c37.387,37.388,98.22,37.388,135.607,0L300.852,393.57l74.56-74.56l19.554-19.553 c26.604-26.604,26.604-69.891,0-96.494l-14.462-14.462c-26.604-26.604-69.89-26.604-96.494,0L146.615,325.896 c-11.952,11.953-11.952,31.328,0,43.274c11.946,11.946,31.328,11.946,43.274,0l137.395-137.394c2.741-2.741,7.203-2.741,9.944,0 l14.462,14.462c2.742,2.741,2.742,7.203,0,9.945l-19.554,19.553l-74.56,74.56L152.962,454.911 c-13.525,13.525-35.533,13.525-49.058,0l-32.595-32.595c-13.525-13.525-13.525-35.533,0-49.058l21.322-21.322l179.493-179.493 l63.465-63.465c25.281-25.281,66.42-25.281,91.702,0l47.65,47.65c25.281,25.282,25.281,66.421,0,91.702L249.297,473.976 c-11.953,11.952-11.953,31.328,0,43.274c11.946,11.946,31.328,11.946,43.274,0l225.645-225.645 c49.144-49.144,49.144-129.107,0-178.251l-47.65-47.65c-49.144-49.144-129.107-49.144-178.251,0l-63.465,63.465L49.362,308.662 L28.04,329.984c-37.387,37.387-37.387,98.22,0,135.606L60.629,498.186z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485 485">
<g>
<path d="M413.974,71.026C368.171,25.225,307.274,0,242.5,0S116.829,25.225,71.026,71.026C25.225,116.829,0,177.726,0,242.5 s25.225,125.671,71.026,171.474C116.829,459.775,177.726,485,242.5,485s125.671-25.225,171.474-71.026 C459.775,368.171,485,307.274,485,242.5S459.775,116.829,413.974,71.026z M242.5,455C125.327,455,30,359.673,30,242.5 S125.327,30,242.5,30S455,125.327,455,242.5S359.673,455,242.5,455z" />
<path d="M318.514,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S299.215,231.486,318.514,231.486z" />
<path d="M166.486,231.486c19.299,0,35-15.701,35-35s-15.701-35-35-35s-35,15.701-35,35S147.188,231.486,166.486,231.486z" />
<path
d="M242.5,355c-46.911,0-89.35-29.619-105.604-73.703l-28.148,10.378C129.329,347.496,183.08,38
5,242.5,385 s113.171-37.504,133.752-93.325l-28.148-10.378C331.85,325.381,289.411,355,242.5,355z"
/>
</g>
</svg>
</div>
</div>
{isVisible && (
<div className={styles.bottom}>
<input
type="file"
ref={fileInputRef} // тут возникает ошибка 'ref' is specified more than once, so this usage will be overwritten.ts(2783) addPost.tsx(159, 15): This spread always overwrites this property. const fileInputRef: React.RefObject<HTMLInputElement>
multiple
accept=".jpg,.jpeg,.png,.gif,.mp3,.mp4"
{...fileInputProps} // Передаем свойства от useController
/>
<div className={styles.options}>
<input type="text" placeholder="Тэги" {...register("tags")} />
<button onClick={() => addTagInPost()}>+</button>
</div>
<div className={styles.tags}>
{tags.map((item, index) => (
<AddTag text={item} key={index} />
))}
</div>
<button className={styles.submit}>Отправить</button>
</div>
)}
</form>
</div>
);
};
export default AddPost;
пробовал так же пользоваться register, но ошибка повторялась
You need to sign in to view this answers
Leave feedback about this