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]);

如何在react js中将数组转换为键值对？

2 个答案: