在 React-js 中将对象作为 Autocomplete 的数据传递

【问题标题】：Pass an object as data of Autocomplete in React-js在 React-js 中将对象作为 Autocomplete 的数据传递
【发布时间】：2018-03-16 21:14:17
【问题描述】：

我正在使用 React-md 的自动完成功能。其实我想在自动完成中传递一个对象数组，我已经尝试了下面的代码。

<Autocomplete
    id="Autocomplete"
    placeholder="I want ..."
    className="md-cell md-cell--4"
    data={services_data[name]}
    filter={Autocomplete.caseInsensitiveFilter}
    inputStyle={style.inputstyle}
    style={style.rootstyle}
    listStyle={style.liststyle}
    onAutocomplete={this.handleChange.bind(this.value)}
/>

我有以下格式的service_data：

0: {fee: 100, name:"abc"}
1: {fee: 240, name="xyz"}
.
.
.
.

现在我想在自动完成数据中传递这个对象的数组，并希望按名称列出建议。我已经展示了我尝试过的内容，并且在我在该字段中键入内容后立即收到错误消息。我想要的是，在用户选择一个值后，该名称的完整对象应该在函数 handleChange 中传递。

提前致谢。

【问题讨论】：

标签： reactjs autocomplete

【解决方案1】：

您的service_data 似乎是一个对象。自动完成需要一个数组，带有一个键 dataLabel。

let transformedData = Object.values(service_data).map((item)=>{
  item.dataLabel = item.name; return item;
})

onAutoComplete 使用用户点击的项目的建议、suggestIndex、dataLabel 调用。您的handleChange 可以访问完整的对象，如下所示。

handleChange(suggestion, index, dataLabel){
  let completeObject  = service_data.find((item)=>(item.name==dataLabel))
  ...
}

你的handleChange也应该绑定到this而不是this.value

<Autocomplete
  data={transformedData}
  onAutoComplete={this.handleChange.bind(this)}
  ...
/>

【讨论】：

你的 service_data 是我假设的对象还是数组？