如何在动态数据上使用 secondaryText 配置 Material-UI 自动完成

Question

我遇到了一个问题，我觉得缺少相关文档。

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

如果我只使用一个文本在 MenuItem 上呈现它工作正常，比如显示一个名称属性我从数据库中获得，但如果我尝试将名称显示为主要文本和大小作为 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

您必须像下面这样在数据源中配置辅助文本（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;"
      />
    ),
  },
];

Answer 2

好的，感谢@awzx 给我的答案，我找到了答案。

我正在使用 dataSourceConfig 和 dataSource，为了处理主要文本和次要文本，它不适用于 dataSourceConfig，所以我从我的组件中删除了该属性

dataSourceConfig={this.dataSourceConfig}

为了放置数据，我这样做了：

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});

如何在动态数据上使用 secondaryText 配置 Material-UI 自动完成

How to configure Material-UI Autocomplete with secondaryText on dynamic data

autocomplete

reactjs

material-ui