如何将密钥检索到 Semantic-ui-react 下拉列表中？答案

【问题标题】：How to retrieve the key into a Semantic-ui-react dropdown?如何将密钥检索到 Semantic-ui-react 下拉列表中？
【发布时间】：2018-12-16 01:32:19
【问题描述】：

我对反应下拉菜单有一个小问题。

我可以提取下拉列表中的值，但我还需要密钥，因为我的页面是用来卖东西的。所以，它是一个关联表，我需要每个表中的 id 来进行查询 INNERJOIN。

我是这样填写的：

let options_customers = [];

serviceList[0].map((service, i) =>
                    options_customers.push({ 
                        key: service.Id, 
                        text: service.Name, 
                        value: service.Name 
                     }))

我的下拉菜单：

  <Dropdown 
    selection options={options_customers} 
    onChange={this.handleChange} 
    value={value} key={options_customers.key} 
    name="selectCustomer" placeholder='Select Customer' 
  />

【问题讨论】：

您是在问如何在handleChange 函数中获取密钥？
是的，我想在我的 handleChange 中获取密钥，但我总是不确定。不知道有没有可能？

标签： reactjs model-view-controller jsx es6-modules semantic-ui-react

【解决方案1】：

我正在提供反馈和我所做的更新：

第一：

<Dropdown selection options={options_customers} onChange={this.handleChange} name="selectCustomer" placeholder='Select Customer' /><br />

在我之前的代码中，我有 value={value} 和 key={options_customers.key}

其次，在我的 handleChange 中，我实现了您的示例，现在它正在工作非常感谢！

支持他的解决方案，请在顶部查看

【讨论】：

【解决方案2】：

您可以使用在data 中获得的value 到onChange 函数来取出正确的选项并从中获取密钥：

handleChange(event, data) {
  const { value } = data;
  const { key } = data.options.find(o => o.value === value);
}

【讨论】：

谢谢！我可以解释一下它是如何工作的吗？我是学习 React 的新手，我真的很好奇。 :)
当然！ Dropdown onChange 函数将调用一个事件和所选选项的数据。然后，我们可以通过find 搜索赋予Dropdown 的options，以找到与刚刚选中的value 相同的value 选项。我们终于从这个选项中选择了key，我们就完成了。
那么我可以申请每个组件吗？但是为什么它没有存储在 event 中，我们需要第二个参数 data ？因为，我理解该事件为我们提供了元素的属性，因此我们可以从中检索。此外，在您的示例中， o.value ==== value 是否直接比较 id 因为我的下拉列表中有 2 个相同的值。例如，id="1" hello 和 id="2" hello。那么它会比较 id 吗？
@Nightlord 这就是 Semantic UI Dropdown 的构建方式。文本可以相同，但有两个具有相同值的选项可能不是一个好主意。