javascript - Formik - 从两个单独的字段设置相同的字段值

Question

我希望从两个单独的字段中设置相同的字段值。

这样做的原因是，在我的用例中，额外的弹出模式可以允许在同一字段上进行更多输入。我有一组可供用户切换的可选芯片（自定义字段，工作正常）。如果用户选择，我希望他们能够按下“手动添加”按钮，该按钮将显示相同的芯片及其当前切换的状态，以及供他们输入和选择匹配的文本输入框从自动完成列表中，这将添加新的芯片。

我的问题是我希望用户能够关闭他们刚刚手动添加新芯片的模式，并在表单上的当前芯片字段中查看更新。这需要两个单独的自定义 formik 字段在同一值集上设置字段值。

这可能吗？我无法让它工作。

没有所有模态细节的简化示例：

<View>
  <Field
    className="custom-select"
    name="allergyChips"
    component={SelectableChips}
    initialChips={values.allergyDisplayChips}
    value={values.allergyChips || []}
    onChangeChips={(chips) => setFieldValue('allergyChips', chips)} 
  />
</View>
<View style={{ margin: 30 }}>
  <Field
    className="custom-select"
    name="allergyChips2"
    component={SelectableChips}
    onChangeChips={(chips) => setFieldValue('allergyChips', chips)}
  />
</View>

预期行为：我希望更改任何一个字段都应该更新另一个字段中的芯片。对于芯片，我希望当我单击一个时两者都会切换。我希望这对于文本输入字段也是一样的，由于其中任何一个的变化，两者都会发生变化。

我尝试了什么：使用handleChange而不是setFieldValue，使用带有更新值的resetForm和设置enableReinitialize = {true}。

标签： javascriptreactjsformsreact-nativeformik