Formik Field 取决于另外两个
Formik Field Depending on Two Others
我创建了一个 codesandbox 来显示 3 个 formik 字段：名字、姓氏和姓名。
我试图让字段 name 仅显示 ${firstName} ${lastName} 直到用户自己修改 name 字段，因此条件 name === firstName + ' ' + lastName 失败，之后name 字段不应再自动更新。
挑战在于我试图让这段代码存在于 MyContactForm.tsx 文件中，因为之后我需要在其他类似的 My*Form.tsx 组件中重用字段间依赖的逻辑，因此，无需更改即可重用“通用”MyForm.tsx 组件。
根据评论，我做了一个 sandbox，它将 display name 链接到 name 和 last name，只要用户不修改 [=10] =] 手动。就使这种逻辑通用而言，我反对这种做法，除非您有数百个具有不同字段的表单，在这种情况下，您需要动态生成一个表单，并且在一个非常不同的对话中进行。
进行了一些更改，以便您对 MyContactForm 的使用保持不变。
- 向
MyTextField 添加了一个可选属性 onChange: (nextValue: string) => void，以便在更改字段值时调用它
- 在上面定义的回调中添加了我们的自定义逻辑，以便扩展而不是覆盖之前的表单逻辑。
- 在
MyCustomForm 内的表单中添加了一个 follow 字段，以决定是否跟踪来自 firstName 和 lastName 的更改。 （查看伪代码chat）
- 在从
App.tsx 调用表单提交回调时破坏了 follow 道具，这样开发人员只从 [=10] 收到 he/she 是 expecting/seeing 的那些表单值=]
This 是包含解决方案的分叉沙箱。
我创建了一个 codesandbox 来显示 3 个 formik 字段：名字、姓氏和姓名。
我试图让字段 name 仅显示 ${firstName} ${lastName} 直到用户自己修改 name 字段，因此条件 name === firstName + ' ' + lastName 失败，之后name 字段不应再自动更新。
挑战在于我试图让这段代码存在于 MyContactForm.tsx 文件中，因为之后我需要在其他类似的 My*Form.tsx 组件中重用字段间依赖的逻辑，因此，无需更改即可重用“通用”MyForm.tsx 组件。
根据评论，我做了一个 sandbox，它将 display name 链接到 name 和 last name，只要用户不修改 [=10] =] 手动。就使这种逻辑通用而言，我反对这种做法，除非您有数百个具有不同字段的表单，在这种情况下，您需要动态生成一个表单，并且在一个非常不同的对话中进行。
进行了一些更改，以便您对 MyContactForm 的使用保持不变。
- 向
MyTextField添加了一个可选属性onChange: (nextValue: string) => void，以便在更改字段值时调用它 - 在上面定义的回调中添加了我们的自定义逻辑，以便扩展而不是覆盖之前的表单逻辑。
- 在
MyCustomForm内的表单中添加了一个follow字段，以决定是否跟踪来自firstName和lastName的更改。 （查看伪代码chat） - 在从
App.tsx调用表单提交回调时破坏了follow道具，这样开发人员只从 [=10] 收到 he/she 是 expecting/seeing 的那些表单值=]
This 是包含解决方案的分叉沙箱。