反应|材料ui |自动完成|如何在onNewRequest中将id指定为值

Question

我有来自 material-ui 库的AutoComplete个组件。有一种方法可以使用menuItem组件将其显示为选择：

const dataSource = [
  {
    text: name1,
    value: <MenuItem
      primaryText={name1}
      value={id1}
    />
  },
  {
    text: name2,
    value: <MenuItem
      primaryText={name2}
      value={id2}
    />
  }
];

一切看起来都不错，但不起作用。第一个问题是，如果我从列表中选择一个元素，它永远不会显示为字段值。我可以在表单字段中看到它，但是后端只发送此字符串我手动输入到字段中。我发现其中一个通过的属性可以满足我的需求 - onNewRequest。我需要的所有数据，但仍然找不到，如何将chosenRequest对象中可以找到的id传递给该函数，并传递给字段值。

Answer 1

你检查过新版本的MUI吗？新发布的（v0.15.1）包含一个'dataSourceConfig'作为新属性。这允许您将一组对象传递给'dataSource'，然后在'dataSourceConfig'中您可以设置'text'和'value'，如API中所述。另外，最棒的是你在'onNewRequest'上传递了所选对象！

查看http://www.material-ui.com/#/components/auto-complete。

Answer 2

要完成此操作，您可以使用dataSourceConfig，如下所示：

const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

这里有更多示例https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.js