Question

我正在使用react-typeahead，我正在尝试存储并在选择选项或提交表单时获取元素的ID

到目前为止，我有这个：

data = [{ id: 1, name: "something", id: 2, name: "else"}];

我使用这样的地图只获取名称，因为Typeahead选项需要一个字符串数组作为默认值，所以我们在这里丢失了id。

map(function (item) {return item.name;})

<Typeahead options={categories} placeholder="Categories" />

我的问题是，在提交表单或选择选项时，如何保留并获取类别的ID。

这将是以下形式：

<form method="get" action="/" className="form-inline" >
  <Typeahead options={categories} onOptionSelected={this._handleOnOptionSelected} placeholder={text} maxVisible={5} />
  <Link to="/search" onClick={this._handleOnClick} className="btn btn-wa-primary">Search</Link>
</form>

Answer 1

您可以使用onOptionSelected回调来获取所选选项并使用它来查找ID：

/* somewhere in your top component */

handleOptionSelected: function(option) {
  // find the id from the data array
  var id = data.find(function(d) { 
    return d.name === option;
  }); 
  // ... now you have the id
},

/* somewhere in the render() method of your top component */
<Typeahead options={categories} 
           placeholder="Categories"
           onOptionSelected={this.handleOptionSelected} />

由于您无法在任何地方展示表单，因此我无法在表单提交时解决＃34;

注意：您可以使用地图查找ID而不是数组来优化此操作。类似的东西：

var map = {
  "something": 1,
  "else": 2
};

其中，id为map[option]。

react-typeahead：获取所选元素的id

1 个答案: