从带有 redux-form 的 react-select 中进行多项选择无法按预期工作 [英] Multi select from react-select with redux-form not working as intended

问题描述

所以我使用来自 react-select 和 redux-form 的 multi select 和 onBlur hack(?)，它在幕后工作正常，因为当我提交它时，我有选定的数据值

So iam using multi select from react-select with redux-form with the onBlur hack(?) which is working fine behind the curtain because when i submit it I have the selected data in values

但是在访问任何多选字段后(即使我没有选择任何内容)我最终没有任何值(除了这个没有显示任何内容
))

BUT after visiting any multi select field (even if i dont select anything) I end up with no values at all (nothing is displayed but this
))

const options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

<Select
            value="one"
            options={options}
            multi={true}
            {...input}
            onBlur={() => {
              input.onBlur({...input.value})
            }
          }
        />

所以我最终得到了处于 redux 状态的值，但我看不到该字段中的任何值.有人知道为什么会这样吗?

So i end up with values in the redux state but I cant see any values in the field. Anyone know why is this happening?

推荐答案

我还没有使用过更现代的 react-select 版本，但一年前，必须 出现一些问题>split() 将字符串值通过delimiter 得到数组形式的值，然后再次join() 将它们交给组件.

I have not used more modern versions of react-select, but a year ago, there were some issues with having to split() the string value by the delimiter to get the values as an array, and then join() them again to give to the component.

这样的东西:

if (multi) {
  selectValue = value ? value.join(delimiter) : ''
} else {
  selectValue = value || null
}

我建议使用 Redux DevTools 准确检查 Redux 中的值，以及传递给 react-select 的值 prop.我相信你会发现问题所在.

I recommend examining exactly what the value is in Redux, using Redux DevTools, and what value prop is getting passed to react-select. I'm sure you'll find the problem in there.

这篇关于从带有 redux-form 的 react-select 中进行多项选择无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！