<分区>
我正在使用 Formik 在 React 应用程序中进行表单验证。 父组件 (Users) - 显示用户列表。 如果我们选择任何用户，用户的详细信息将显示在表单右侧的另一个组件中。 子组件 (UserDetails) 显示所选用户的详细信息。 所有详细信息都显示在子组件的文本框中，我们可以更改和更新详细信息(这里我使用 FORMIK 在更新前验证字段)。
我有一个场景，当有人修改表单中的详细信息并单击另一个用户而不更新以前的编辑时。 在这种情况下，我想显示一个提示，说明“未保存的更改将丢失”
最佳答案
<Formik/> 上好像没有 Prop 通知更改。通过查看 API，您可以在 Users 上存储一个标志在当前呈现的表单发生任何更改时切换:
// Users
function Users() {
const [edited, setEdited] = useState(false);
const [active, setActive] = useState();
return (
<>
<UsersList onSelect={(user) => {
if (edited) {
// Notify user of unsaved changes
} else {
setEdited(false);
setActive(user);
}
}}/>
<UserDetails user={active} onEdit={() => setEdited(true)}/>
</>
)
}
// UserDetails
function UserDetails({ onEdit }) {
return (
<Formik>
{props => (
<input onChange={(evt) => {
onEdit(); // Notify parent component of an edit
props.handleChange(evt);
}}/>
)}
</Formik>
)
}
关于javascript - 从父组件访问子组件的 FORMIK 表单字段值 - React JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64378632/