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

【问题标题】：Formik - "dirty" gets applied to all instances with the same custom componentFormik - “脏”应用于具有相同自定义组件的所有实例
【发布时间】：2019-09-08 09:19:53
【问题描述】：

当前行为

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

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

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

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

预期行为

该类应仅应用于我在其中键入的脏输入。

我在这里做错了吗？

【问题讨论】：

标签： reactjs next.js formik yup

【解决方案1】：

您可以通过更新 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

希望这对你有用！

【讨论】：

是的，我知道，我已经在我的项目中这样做了，但这不是我想要的。我只是想知道为什么“脏”会应用于具有相同自定义组件的所有输入？
对于formik，dirty 在整个表格中都注明，而不是针对个人input。这就是为什么如果您更新 input 之一中的任何值，那么它就会变为 true
我已经更新了代码。所以你可以了解dirty 和error 的行为。查看代码codesandbox.io/s/hello-world-w7zwt
啊哈，很好。我认为“isValid”与“dirty”相同，因为它的行为方式相同，对吧？它也是 Form 道具，而不是 Field 道具。