如何在动态数据上使用辅助文本配置 Material-UI 自动完成

Question

我遇到了一个问题，我觉得缺少这方面的文档。

我正在构建一个站点，我在其中获得一个自动完成组件来搜索数据库中的数据，它工作正常，它获取数据，我已经为此构建了验证，一切正常。

如果我只使用一个 Text 在 MenuItem 上呈现它可以正常工作，例如显示我从数据库中获得的名称属性，但如果我尝试将 Name 显示为 primaryText 并将 Size 显示为 SecondaryText 它根本不会'不渲染自动完成 menuItem 结果，即使被正确填充。

为了记录，我试图实现这样的目标：https://cloud.githubusercontent.com/assets/9424409/17258323/33764c38-557b-11e6-808c-ac22287703d0.gif

但我只能让组件使用这样的东西：https://cloud.githubusercontent.com/assets/9424409/17258376/66015990-557b-11e6-8c12-9016da6e1f2e.gif

这是代码，因为它只使用 textKey 来渲染我的数据：

this.dataSourceConfig = {text: 'textKey',  value: 'valueKey', validationKey:'validationKey'};

this.state = {
  dataSourceDrug:[{textKey: 'Text data goes here', valueKey: "", validationKey:'validation value goes here'}]}

render(){
    return(
        <AutoComplete
         onNewRequest={this.onDrugNewRequest}
         onUpdateInput={this.handleDrugUpdateInput}
         searchText={this.state.valueDrug}
         dataSource={this.state.dataSourceDrug}
         dataSourceConfig={this.dataSourceConfig}
        />
      )
    }

那么如何配置它来渲染主要和次要文本？

我已经检查了 git 上的文档甚至问题，但对我来说并没有什么意义：

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

https://github.com/callemall/material-ui/issues/4852

https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.js

Answer 1

好的，感谢@awzx 给我带来的轻松答案，我找到了答案。

我正在使用 dataSourceConfig 和 dataSource，并且要使用主要和次要文本，它不适用于 dataSourceConfig，因此我从组件中删除了该属性

dataSourceConfig={this.dataSourceConfig}

在我的 for 中放置数据我已经这样做了：

var updatedDataSource = [];
for (var i = 0; i < response.length; ++i) 
{
  var _name = response[i].name;
  var _size = response[i].size;
  var _val = <MenuItem primaryText={_name} secondaryText={_size}/>
  updatedDataSource.push({text:response[i].name, value:(_val), valueKey:response[i].id, validationKey:'validation string here'});
}
this.setState({dataSourceDrug:updatedDataSource});

Answer 2

您必须在 dataSource 中配置辅助文本，如下所示（Material UI 文档中的第二个示例）：

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import MenuItem from 'material-ui/MenuItem';

const dataSource1 = [
  {
    text: 'text-value1',
    value: (
      <MenuItem
        primaryText="text-value1"
        secondaryText="&#9786;"
      />
    ),
  },
  {
    text: 'text-value2',
    value: (
      <MenuItem
        primaryText="text-value2"
        secondaryText="&#9786;"
      />
    ),
  },
];