Question

我正在使用class User(AbstractUser): favorites = models.ManyToManyField(Lesson, through='UserLessons') class UserLessons(models.Model): user = models.ForeignKey(User) lesson = models.ForeignKey(Lesson) favorite = models.BooleanField(default=False)和react-select来制作外观和功能与材料相似的自动完成组件。

我在这里遵循了基本设置

https://material-ui.com/demos/autocomplete/

然后必须按照API处理的方式调整数据结构的设置，这一切都很好，但是现在我试图允许用户创建一个新选项，但似乎无法实现向后显示选项

这里是组件

material-ui

我设置了一个运行示例和一些选项的堆栈闪电战。如果您键入并选择一个选项，则会看到它显示选定的选项，但是如果您键入一个新选项并按Enter键，它将不会显示该选项，而我正试图找出原因，这对我的帮助有所帮助我在这里做错了会很有帮助

https://wmazc4.stackblitz.io

Answer 1

我认为错误在于您的数据转换ID导致您的react-select组件造成价值混乱

我从您的代码的精确副本中进行了演示（因为您的示例无效）

这是我的示例：https://codesandbox.io/s/p9j3xz843m

我在这里使用

    inputProps={{
        classes,
        name: "react-select-single",
        instanceId: "react-select-single",
        simpleValue: true,
        options: colourOptions,
        valueKey: "id",
        labelKey: "label"
      }}

发现我使用了 valueKey 和 labelKey 道具来转换数据，您可以从实际示例中找到更多信息

希望这会对您有所帮助。如果您需要更多说明，请告诉我。

使用Creatable react-select无法显示值

1 个答案: