How to retrieve the key into a Semantic-ui-react dropdown?

问题

I have small question about react dropdown menus.

I can extract the values inside the dropdown, but I also need the key, because my page is for selling stuff. So, it is an associative table and I need the id from each table to make my query INNERJOIN.

This is how I fill it:

let options_customers = [];

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

My dropdown:

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

回答1:

You can use the value you get in the data to the onChange function to take out the right option and take the key from that:

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

回答2:

I am giving the feedback and the update that I have done :

First:

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

In my previous code, I had value={value} and key={options_customers.key}

Secondly, in my handleChange, I implemented your example and now it is working Very thankful !

Upvoted his solution please to see on the top

来源：https://stackoverflow.com/questions/51227359/how-to-retrieve-the-key-into-a-semantic-ui-react-dropdown

标签

reactjs

model-view-controller

jsx

es6-modules

semantic-ui-react