Formik 字段取决于其他两个答案

【问题标题】：Formik Field Depending on Two OthersFormik 字段取决于其他两个
【发布时间】：2020-11-06 10:36:08
【问题描述】：

我创建了一个codesandbox，它显示了 3 个表单字段：名字、姓氏和姓名。

我试图让 name 字段显示 ${firstName} ${lastName} 直到用户自己修改 name 字段，因此条件 name === firstName + ' ' + lastName 失败，之后 name 字段不应该自动更新了。

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

【问题讨论】：

我想大多数人不明白你想要达到什么目的。您是否尝试在第一次更改后禁用名称字段？沙箱中已有默认值。如果我完全理解您想要实现的目标，我想我可以提供帮助。还要注意你提到的条件不在沙盒代码中，这使得目标更难理解。
对此我很抱歉。我试图停止使名称字段跟随名字和姓氏字段的更改，只有当用户自己更新名称字段以使其等于名字+空格+姓氏以外的其他内容时。是不是更清楚了？
它现在的工作方式是name只有在Display Name被直接修改时才会更新。没有 firstName + ' ' + lastName 这样的东西。
对不起，我指的是 givenName 和 familyName，而不是 firstName 和 lastName。是的，我想要发生的是，如果name = givenName + ' ' + familyName 并且用户修改了givenName 或familyName，那么name 应该相应地改变。否则，如果用户通过手动修改name“断开链接”，那么它应该停止更新。
答案是否解决了您的问题？还是您在寻找其他东西？

标签： reactjs formik use-effect formik-material-ui

【解决方案1】：

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

向MyTextField 添加了一个可选属性onChange: (nextValue: string) => void，以便在更改字段值时调用它
在上面定义的回调中添加了我们的自定义逻辑，以便扩展而不是覆盖之前的表单逻辑。
在MyCustomForm 内的表单中添加了follow 字段，以决定是否跟踪firstName 和lastName 的更改。（查看chat 获取伪代码）
从App.tsx 调用表单提交回调时破坏了follow 属性，这样开发人员只能从MyContactForm 接收他/她期望/看到的表单值

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

【讨论】：

【解决方案2】：

根据评论，我创建了一个sandbox，它将display name 链接到name 和last name，只要用户不手动修改display name。至于使这种逻辑通用化，我反对这一点，除非您有数百个具有不同字段的表单，在这种情况下，您需要动态生成一个表单，并且会进行非常不同的对话。

【讨论】：

为什么您的解决方案存在滞后？我的意思是 - 当您在 lastName 字段中输入内容时，它不会在第一时间立即反映出来。在您继续在同一个输入框中输入字符后，会看到/反映更改（在 Display Name 框中），结果也会滞后一个字符输入 - 就像我在 lastName/familyName 中添加了 sss ，Display Name 反映 - ${firstName} ${lastName}ss。您确定您的解决方案工作正常吗？
检查此 gif 以了解行为：ibb.co/GkNWVWb