时间戳

首页 > 解决方案 > Formik - “脏”应用于具有相同自定义组件的所有实例

reactjs - Formik - “脏”应用于具有相同自定义组件的所有实例

问题描述

当前行为

当我创建自定义输入组件并尝试根据输入是否“脏”来添加类名时，该类将应用于使用该组件的所有输入。

这是我创建的一个简单示例... https://codesandbox.io/s/hello-world-h60hj

您会注意到两个输入都使用相同的自定义组件“InputComponent”，当您开始输入其中任何一个时，该类都会应用于它们。

我认为“isValid”的行为也相同。

预期行为

该类应该只应用于我在里面输入的脏输入。

我在这里做错了吗？

标签： reactjsnext.jsformikyup

解决方案

您可以通过更新InputComponent.js来实现您的输出。

<div>
  <input
    type="text"
    {...field}
    {...props}
    className={
      !isValid && touched[field.name] && errors[field.name] ? "error" : ""
    }
  />
  {!isValid && touched[field.name] && errors[field.name] && (
    <div className="error">{errors[field.name]}</div>
  )}
</div>

https://jaredpalmer.com/formik/docs/api/formik#dirty-boolean

true如果值与初始值不完全相等，则返回，false否则。dirty是一个只读的计算属性，不应该直接改变。

我在这里更新了你的代码
https://codesandbox.io/s/hello-world-w7zwt

希望这对你有用！

推荐阅读