Использование одной ссылки для нескольких полей ввода в машинописном тексте реакции

Я пытаюсь использовать одну и ту же ссылку для нескольких полей ввода в своей форме. Но при регистрации ссылка ссылается только на первое поле ввода. Могу ли я в любом случае использовать один и тот же 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'.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
79
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В машинописном тексте большинство хуков являются общими. Вы объявляете их тип, используя <>. Если вы хотите присвоить свойства 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

Большое спасибо. Оно работает! Пример очень помогает!

neona pinto 05.12.2022 22:28

Другие вопросы по теме