Я пытаюсь использовать одну и ту же ссылку для нескольких полей ввода в своей форме. Но при регистрации ссылка ссылается только на первое поле ввода. Могу ли я в любом случае использовать один и тот же ref и использовать для разных входов?
import React, {FC, useEffect, useRef, useState} from 'react';
import { IFormProps } from '../../utils/Interfaces';
import 'react-phone-number-input/style.css'
const Form:FC<IFormProps> = ({formData, handleFormData, errors, handleValidate}) => {
const inputField = React.useRef() as React.MutableRefObject<HTMLInputElement>;
return (
<form className='user-form'>
<label>First Name</label>
<input
type = "text"
ref = {inputField}
value = {formData.firstName}
name = "firstName" id = "firstName"
onChange = {(e) => handleFormData(e)} placeholder = "Enter your first name"
onFocus = {() => console.info('focus')}
onBlur = {() => handleValidate(inputField)}
/>
<label>Last Name</label>
<input
type = "text"
value = {formData.lastName}
name = "lastName" id = "lastName"
onChange = {(e) => handleFormData(e)}
placeholder = "Enter the last name"
onBlur = {() => handleValidate(inputField)}
ref = {inputField}
/>
</form>
)
}
export default Form;
Я передаю эту информацию родителю для обработки проверки. Я не уверен, как передать один и тот же ref(inputField) в качестве разных элементов ввода с его атрибутами.
Я пытался сделать это Использовать один объект ref для нескольких элементов ввода, но есть ошибка, говорящая следующее. Я знаю, что это причина машинописного текста. Но не уверен, как с этим справиться.
ref = {(el) => (inputField.current["firstName"] = el)}
Element implicitly has an 'any' type because expression of type '"firstName"' can't be used to index type 'HTMLInputElement'.
Property 'firstName' does not exist on type 'HTMLInputElement'.
В машинописном тексте большинство хуков являются общими. Вы объявляете их тип, используя <>
.
Если вы хотите присвоить свойства firstName
и lastName
, объявите их в своем типе. Вам также потребуется инициализировать объект.
const inputField = React.useRef<{
firstName: HTMLInputElement;
lastName: HTMLInputElement;
}>({ firstName: null, lastName: null });
return (
<form className = "user-form">
<label>First Name</label>
<input
ref = {(ref) => (inputField.current.firstName = ref)}
...
/>
<label>Last Name</label>
<input
ref = {(ref) => (inputField.current.lastName = ref)}
...
/>
</form>
);
демо: https://stackblitz.com/edit/react-ts-zkc3nj?file=App.tsx
Большое спасибо. Оно работает! Пример очень помогает!