Как использовать ref с библиотекой реагирования формы-реакции?
Я пытаюсь использовать reactref с простым вводом формы, определенным с помощью библиотеки react-hook-form, как показано ниже (на основе официальные документы).
Вот фрагмент кода, с которым я имею дело:
<input id = "lastName"
{ ...myRegister('lastName', {
required: true,
onChange: (e) => {
console.info(e.target.value);
},
ref: (input) => {
console.info("lastName ref...")
textInput2 = input
}
})
} />
Функция обработчика onChange работает, как и ожидалось (печатает входное текущее значение), НО ref нет! - строка lastName ref... не печатается и textInput2 не инициализируется переменной input!
Что я делаю неправильно выше!?
Может ли кто-нибудь дать мне рабочий пример атрибута ref, определенного в библиотеке react-hook-form?
@Sarthak Dwivedi Хорошо, друг, не мог бы ты быть так любезен и привести мне пример?
извините, я никогда раньше не использовал эту библиотеку, но просто проверьте в конце документа регистр(), которым вы поделились, он уже дает пример How to work with innerRef, inputRef? <-- Заголовок тот же. Кроме того, метод Register устанавливает для вас ссылку по умолчанию, пример должен прояснить ситуацию.
Ответы 1
Библиотека использует внутреннюю ссылку для отслеживания значения. Чтобы добавить свою ссылку, проверьте: https://www.react-hook-form.com/faqs/#Howtosharerefusage
import { useRef } from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit } = useForm();
const firstNameRef = useRef(null);
const onSubmit = data => console.info(data);
const { ref, ...rest } = register('firstName');
return (
<form onSubmit = {handleSubmit(onSubmit)}>
<input {...rest} name = "firstName" ref = {(e) => {
ref(e)
firstNameRef.current = e // you can still assign to ref
}} />
<button>Submit</button>
</form>
);
}
Хорошо, я думаю, я понял. Выполняя ref = {(e) => {...}, я просто расширяю стандартное, неявное использование ссылки в библиотеке, добавляя к нему свои собственные дополнения. Но теперь возникает вопрос: что произойдет, если в приведенном выше коде я просто закомментирую строку ref(e), отключающую внутреннюю использование библиотеки ref? Я сделал это в экспериментальных целях и без ошибок, все работает. Итак, на что повлияет отказ от вызова использования внутренней ссылки по умолчанию?
Из документа, который вы отправили, я вижу, что
refне имеет типа значенияChangeHandlerон нуженReact.Ref<any>: Input reference for hook form to register.Итак, создайте ссылку на реакцию и предоставьте ему это.