Question

我正在使用Material UI的自动完成组件，并面临显示值而不是文本元素的问题。我使用以下格式作为我的数据源：

[{value: 'someValue', text: 'My Text'}, {value: 'someOtherValue', text: 'Some other Text'}]

当用户输入查询时，它会正确找到匹配结果，但下拉列表本身会显示值而不是文本。

示例

用户搜索“我的”：

结果：

[someValue]

我想要的是什么：

[My Text]

对我来说，它现在的工作方式实际上似乎有点违反直觉。

material-ui / AutoComplete / AutoComplete.js [第346-354行]

当我从：

更改组件的源代码时

requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.value,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });

到

requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.text,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });

它可以正常运作。

我找不到任何有关此问题的公开问题。我只是做错了吗？

最佳

马特

Answer 1

所以，基本上这是每个属性的含义：

text：选择其中一个选项后，将在输入中显示的属性。

值 popover 中每个选项都会显示的属性。它可以是text或node。

我同意你在文档中对这些属性缺乏解释，但我们可以看到它们在示例中使用，主要在第二部分（数据源）中。 PR受欢迎..

它们有2个不同的属性，因为很多时候用户需要显示不同的值，并且大多数（如果不是全部）库都支持它。可能有一个默认属性可以满足这两个需求，以防其中一个没有价值，但它到目前为止还没有，如果你想要或创建一个PR，你甚至可以建议它。

希望我能提供帮助。

下拉列表中的材料UI自动完成结果文本

1 个答案: