我试图在表单中为多个输入字段使用相同的引用。但是在记录时,引用只引用第一个输入字段。是否有任何方法可以使用相同的引用并为不同的输入使用?
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 的原因。但是不知道如何处理它。
第一次
2条答案
按热度按时间hof1towb1#
可以定义ref数组并按索引赋值
lymnna712#
在typescript中,大多数钩子都是泛型的。你用
<>
声明它们的类型。如果你想给firstName
和lastName
赋值,那么就在你的类型中声明它们。你还需要初始化对象。演示:https://stackblitz.com/edit/react-ts-zkc3nj?file=App.tsx