"onChange" 触发时,Formik FieldArray 失去焦点
Formik FieldArray lost focus when "onChange" triggered
我已按照 an article written by Formik Team member 中的教程进行操作
但是事情并没有按预期进行;每当我在文本输入字段中键入内容时,每次按下它都会失去焦点,一次又一次,我必须单击文本输入字段以写入下一个字符。我分享了 codesandbox link.
这里的代码摘自文章
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}'}
。当道具改变时,这个键对于同一个组件应该是永久的。但是,在您的情况下,它包括 ${friend}
,这意味着键会随着每次击键而变化。
解决方案:只需从您的密钥中删除 ${friend}
,使其对同一项目保持不变。
我已按照 an article written by Formik Team member 中的教程进行操作 但是事情并没有按预期进行;每当我在文本输入字段中键入内容时,每次按下它都会失去焦点,一次又一次,我必须单击文本输入字段以写入下一个字符。我分享了 codesandbox link.
这里的代码摘自文章
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}'}
。当道具改变时,这个键对于同一个组件应该是永久的。但是,在您的情况下,它包括 ${friend}
,这意味着键会随着每次击键而变化。
解决方案:只需从您的密钥中删除 ${friend}
,使其对同一项目保持不变。