Formik

Question

当前行为

当我创建自定义输入组件并尝试根据输入是否为 "dirty" 添加 class 名称时，class 会应用于所有输入使用这个组件。

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

您会注意到两个输入都使用相同的自定义组件 "InputComponent"，并且当您开始输入其中任何一个时，class 将应用于两个输入。

我认为 "isValid" 也有同样的表现。

预期行为

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

我是不是做错了什么？

Answer 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

Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.

我已经在此处更新了您的代码
https://codesandbox.io/s/hello-world-w7zwt

希望这对你有用！

Formik - "dirty" 应用于具有相同自定义组件的所有实例

Formik - "dirty" gets applied to all instances with the same custom component

reactjs

next.js

yup