如何在反应js中将数组转换为键值对？答案

【问题标题】：how to convert array to key value pair in react js?如何在反应js中将数组转换为键值对？
【发布时间】：2019-08-02 13:45:38
【问题描述】：

我在演示中使用react-final-form 和semantic-ui。我在演示中使用多个选择下拉菜单。

我将multiselect 下拉列表转换为single select（我喜欢具有类似芯片结构的设计）。

但是当我选择任何值时，我的表单数据响应会像这样传入。 用户选择任何值时的表单响应

{
  "dropdown": [
    "ax"
  ]
}

预期反应

{
      "dropdown": "ax"

    }

这是我的代码

https://codesandbox.io/s/musing-cerf-kg41n

我像这样将mutiselect 转换为单选

onChange={(e, data) => {
          if (data.value && data.value.length > 1) {
            data.value.shift();
          }
          return input.onChange(data.value);
        }}

【问题讨论】：

您希望多个项目的数据如何？您能否更新您的预期响应以包含多个项目？
我不想要多个项目..但我需要芯片。芯片的意思是“灰色背景”，带有交叉按钮
在我的演示用户中一次只选择一项
但它的设计看起来像多选
检查我的答案，如果它符合您的要求，请告诉我。

标签： javascript reactjs semantic-ui react-final-form

【解决方案1】：

您可以更改提交时的值以满足您的需求，如下所示：

 const onSubmit = async values => {
  await sleep(300);
   const transformedValue = {
       dropdown: values.dropdown[0]
   } 
   window.alert(JSON.stringify(transformedValue , 0, 2));
 };

这将产生预期的结果并保持芯片视图。

【讨论】：

但是我的芯片不见了...:(
我需要那个芯片“带十字按钮的灰色背景”
请删除你的答案..!!
放松，我更新了我的答案，这样你就可以保持芯片布局。
codesandbox.io/s/musing-cerf-kg41n 查看我的代码我没有使用 renderSelect

【解决方案2】：

很简单，不用返回这个，

return input.onChange(data.value);

返回这个，

return input.onChange(data.value[0]);

【讨论】：

这将删除芯片视图。他需要芯片。
它移除芯片..:(