如何在 React JS 中将数组转换为键值对？

Question

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

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

但是当我 select 任何值时，我的表单数据响应都是这样传入的。 当用户select任何值

时形成响应

{
  "dropdown": [
    "ax"
  ]
}

预期响应

{
      "dropdown": "ax"

    }

这是我的代码

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

我像这样把mutiselect转换成单select

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

Answer 1

您可以像这样更改提交的值以满足您的需要：

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

这将产生预期的结果并保持筹码视图。

Answer 2

很简单，而不是 return 这样做，

return input.onChange(data.value);

return这个，

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

如何在 React JS 中将数组转换为键值对？

how to convert array to key value pair in react js?

javascript

reactjs

semantic-ui

react-final-form