Question

我正在使用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中传递。

提前致谢。

Answer 1

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

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

使用用户点击的项目的suggestion，suggestionIndex，dataLabel调用onAutoComplete。您的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)}
  ...
/>

将对象作为React-js中的自动完成数据传递

1 个答案: