Question

我正面临一个问题，我觉得缺乏相关的文档。

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

如果我在MenuItem上只使用一个Text来渲染它就可以正常工作，比如显示我从数据库获得的名称属性，但是如果我尝试显示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}

在我发布的数据中，我已经完成了这项工作：

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;"
      />
    ),
  },
];

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

2 个答案: