2

我打算使用自动完成，以便它将对象的某个属性存储在表单状态中，并在自动完成选项列表中显示不同的属性。例如，如果选项列表如下：

[
    { gender_name_short: "F", gender_name_long: "Female" },
    { gender_name_short: "M", gender_name_long: "Male" },
    { gender_name_short: "O", gender_name_long: "Other" }
]

我打算将gender_name_short 存储在表单状态中，并在下拉列表中显示gender_name_long。我能够做到这一点，这里是我所做的实现的代码和框链接（你还能提出更好的方法吗？） https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App。 js:231-412

现在我的问题是我还希望能够在一个数组中存储多个值，这不适用于这个例子，因为当人不能有多个性别时，但我想将它用于其他用例。那我应该怎么做

当前行为

如果我将“多个”道具添加到自动完成组件，我会收到错误 TypeError Cannot read property 'filter' of undefined

预期行为

将多个值以各自的 short_name_format 存储在数组中，例如）['M','F','O']

重现步骤

https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js:231-412 步骤：

  1. 目前，代码可以在没有多个的情况下工作，以演示什么是有效的
  2. 在自动完成调用 (prop) 中取消注释 App.js 中的多个
  3. 将性别的初始化更改为空列表
4

1 回答 1

1

此沙箱显示了您的问题的可能解决方案。

查看transformValue我在顶部添加的实用程序FormikAutocomplete.js：

const tranformValue = (value, fieldtosave) =>
  Array.isArray(value)
    ? value.map(v => v[fieldtosave] || v)
    : value[fieldtosave];

及其用法：

<Autocomplete
      onChange={(_, value) =>
        setFieldValue(name, value ? tranformValue(value, fieldtosave) : null)
      }
 ...
/>

基本上，您缺少的是当Autocomplete设置为时multiple是onChange value一个数组。

于 2020-07-29T21:30:32.667 回答