如何将数组转换为React Js中的键值对

Question

我在演示中使用 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);
        }}

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 input.onChange(data.value);

返回此，

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