У меня есть 3 textFields materialUI, которые визуализируются n раз (n - это целочисленный ввод от пользователя перед визуализацией поля формы, здесь я сохранил его в переменной с именем groupMembersCount). Я использую функциональный компонент в ReactJS, определяя массив с хуками useState как:
const [groupDetails, setGroupDetails] = React.useState([
{ fullName: "", phoneNo: "", gender: "" },
]);
Я получаю его динамически визуализируемым таким образом:
export default function DynamicGroupMember() {
const [groupMembersCount, setGroupMembersCount] = useState(0);
const [show, setShow] = useState(false);
const [groupDetails, setGroupDetails] = useState([
{fullName: "", phoneNo: "", gender: ""},
]);
function handleChange(event, index) {
console.log(event.target.value, index);
let newArr = [...groupDetails]; // copying the old datas array
let item = newArr[index];
item = {...item, [event.target.name]: event.target.value};
newArr[index] = item;
setGroupDetails(newArr);
}
return (
<div>
Number of Group: <TextField name="groupMembersCount" onChange={(event) => {
setGroupMembersCount(event.target.value)
}}/>
{Array.apply(null, {length: groupMembersCount}).map(
(e, i) => (
<div key={i}>
<strong>Member #{i + 1}</strong>
<div className="getIndex" name={i + 1}>
<TextField
id={`name${i + 1}`}
name="fullName"
variant="outlined"
margin="none"
label="Name"
onChange={(event) => {
handleChange(event, i)
}}
/>
<TextField
id={`phoneNo${i + 1}`}
name="phoneNo"
variant="outlined"
margin="none"
label="Mobile Number"
onChange={(event) => {
handleChange(event, i)
}}
/>
<Select
id={`gender${i + 1}`}
name="gender"
variant="outlined"
margin="none"
label="Gender"
onChange={(event) => {
handleChange(event, i)
}}
>
<option value="MALE">Male</option>
<option value="FEMALE">Female</option>
<option value="OTHER">Other</option>
</Select>
</div>
</div>
)
)}
<Button onClick={() => {
setShow(true)
}}>Show</Button>
{
show ?
groupDetails.map(member =>
<Card>
<CardContent>
<Typography color="textSecondary" gutterBottom>
{member.fullName}
</Typography>
<Typography variant="h5" component="h2">
{member.phoneNo}
</Typography>
<Typography color="textSecondary">
{member.gender}
</Typography>
</CardContent>
</Card>) : null
}
</div>
);
}
Я хочу создать один обработчик onChange для динамически отображаемого поля формы (phoneNo), чтобы проверить, что набирает пользователь, и в этом методе обработчика я добавлю два реквизита «ошибка», чтобы сделать поле мобильного номера красным, и «helperText» для отображения сообщение (например, неправильный номер, если пользователь вводит алфавит в номер). теперь, если я проверяю проверку поля номера, ошибка и helperText появляются во всех полях ввода номера мобильного телефона (в n раз отображаемых строках). Я хочу, чтобы он был специфичен для строки, в которую входит пользователь.
Надеюсь, я хорошо объяснил постановку задачи, если нет, пожалуйста, запросите любую информацию.
