reactjs - Formik 字段取决于其他两个

Question

我创建了一个显示 3 个formik字段的代码框：名字、姓氏和姓名。

我试图使该字段仅在用户自己修改该字段之前name显示，因此条件失败，此后该字段不应再自动更新。${firstName} ${lastName}namename === firstName + ' ' + lastNamename

挑战在于我试图让这段代码存在于MyContactForm.tsx文件中，因为此后我需要在其他类似My*Form.tsx组件中重用字段间依赖的逻辑，因此MyForm.tsx无需更改即可重用“通用”组件。

Answer 1

根据评论，我制作了一个沙箱，只要用户不手动修改，它就可以链接display name到。至于使这个逻辑通用，我反对这一点，除非您有数百个具有不同字段的表单，在这种情况下，您需要动态生成一个表单，并且在一个非常不同的对话中进行。namelast namedisplay name

Answer 2

进行了一些更改，以便您的使用MyContactForm保持不变。

1. 添加了一个可选的道具onChange: (nextValue: string) => void，MyTextField以便在更改字段值时调用它
2. 在上面定义的回调中添加了我们的自定义逻辑，以便扩展之前的表单逻辑而不是覆盖。
3. follow在表单中添加了一个字段来MyCustomForm决定是否跟踪更改。（查看聊天中的伪代码）firstNamelastName
4. follow从这样的开发人员调用表单提交回调时破坏了道具，App.tsx仅接收他/她期望/看到的那些表单值MyContactForm

这是包含解决方案的分叉沙箱。