reactjs - 触发“onChange”时,Formik FieldArray 失去焦点
问题描述
我已按照 Formik 团队成员撰写的文章中的教程进行操作, 但事情并没有按预期工作;每当我在文本输入字段中输入内容时,每次按下它都会失去焦点,我必须一次又一次地单击文本输入字段来写下一个字符。我共享了代码和框链接。
这是从文章中获取的代码
import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';
export const InviteFriends = () => (
<div>
<h1>Invite Friends</h1>
<Formik
initialValues={{ friends: ['', '', ''] }}
onSubmit={values => alert(values)}
render={formikProps => (
<Form>
<Field name="email" />
<FieldArray
name="friends"
render={({ remove, push }) => (
<>
{formikProps.values.friends.map((friend, i) => (
<div key={`friend-${i}-${friend}`}>
<Field name={`friends[${i}]`} type="email" />
<button type="button" onClick={() => remove(i)}>
X
</button>
</div>
))}
<button type="button" onClick={() => push('')}>
Add friend
</button>
</>
)}
/>
<button type="submit">Invite Friends</button>
</Form>
)}
/>
</div>
);
解决方案
您的代码中的问题出在关键属性模板中:key={'friend-${i}-${friend}'}
. 当 props 改变时,这个键对于同一个组件应该是永久的。但是,在您的情况下,它包括${friend}
这意味着键随每次击键而变化。
解决方案:只需${friend}
从您的密钥中删除以使其对同一项目保持不变。
推荐阅读
- mysql - 加入 mysql 选择查询为 1 然后分组
- r - if statement in a funcion with dplyr verbs
- sql - Round datetime to the beginning of the current hour
- kotlin - Match string to object property
- django - Django update all Users field Decimal
- javascript - Xpath select element where both children contains text
- r - 使用 system() 从 R 运行 java 命令行
- tsql - SQL SELECT Parent-Child with SORT (...再次)
- mysql - mysql group_concat on multiple tables
- git - Git 未跟踪的文件阻止结帐