在react typescript中对多个输入字段使用单个引用

3lxsmp7m  于 2022-12-05  发布在  TypeScript
关注(0)|答案(2)|浏览(97)

我试图在表单中为多个输入字段使用相同的引用。但是在记录时,引用只引用第一个输入字段。是否有任何方法可以使用相同的引用并为不同的输入使用?

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.log('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)作为具有其属性的不同input元素传递。
我试过做这个Use a single ref object across multiple input elements,但是有一个错误说下面。我知道它的 typescript 的原因。但是不知道如何处理它。
第一次

hof1towb

hof1towb1#

可以定义ref数组并按索引赋值

const inputField = React.useRef<HTMLInputElement[]>([])

 <input 
      type="text" 
        ref={el => inputField.current[0] = el} 
      value={formData.firstName} 
      name="firstName" id="firstName" 
      onChange={(e) => handleFormData(e)} placeholder="Enter your first name"
      onFocus={() => console.log('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={el => inputField.current[1] = el} 
    />
lymnna71

lymnna712#

在typescript中,大多数钩子都是泛型的。你用<>声明它们的类型。如果你想给firstNamelastName赋值,那么就在你的类型中声明它们。你还需要初始化对象。

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

相关问题