Question

我已经创建了一个使用redux-form的react-select。我的输入字段组件使我可以选择一个选择选项，或者通过在输入/选择框中键入来创建一个新选项。运行良好的代码和框的示例-https://codesandbox.io/s/o49kjl09j9

我的组件的下一部分是按数据标签对选项进行分组-您将通过此代码和框查看其工作方式-https://codesandbox.io/s/k5pyr75xor

问题是，我将更改应用到组中后才能工作，我无法再在选择/输入框中键入新选项。不知道如何解决该错误。我已经更改了用于创建组的数据的结构方式，但似乎无法在我的沙箱中实现以下代码-https://codesandbox.io/s/k5pyr75xor。

更新：问题是创建的值没有标签-但我将向创建的选项添加默认标签。例如“自定义”

这是react-select文档推荐的没有成功的代码：

const formatGroupLabel = data => (
  <div style={groupStyles}>
    <span>{data.label}</span>
    <span style={groupBadgeStyles}>{data.options.length}</span>
  </div>
);

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    formatGroupLabel={formatGroupLabel}
  />
);

在此提供任何帮助。

更新：在此处了解问题和解决方法-https://github.com/JedWatson/react-select/pull/2659

我需要实施解决方案的帮助。

Answer 1

我设法深入研究了这个问题。

解决方案是编写您自己的isValidNewOption来替换内置函数，并将其作为属性传递给可创建的select，因为使用http://jedwatson.github.io/react-select/“数字值”中的选项会破坏它，从而导致.toLowerCase（）不起作用在数字上

固定示例：https://codesandbox.io/s/p72l42pz30

  isValidNewOption = (inputValue, selectValue, selectOptions) => {
    if (
      inputValue.trim().length === 0 ||
      selectOptions.find(option => option.name === inputValue)
    ) {
      return false;
    }
    return true;
  };

并将其添加到选择中：

isValidNewOption={this.isValidNewOption}

在功能上添加标签以反应选择中断

1 个答案: