我在我的演示中使用react-final-formwith 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);
}}
您可以在提交时改变值以满足您的需求，如下所示：
const onSubmit = async values => {
await sleep(300);
const transformedValue = {
dropdown: values.dropdown[0]
}
window.alert(JSON.stringify(transformedValue , 0, 2));
};
这将产生所需的结果并保持芯片视图。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句