Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown onChange #1571

Closed
raptoria opened this issue Apr 11, 2017 · 8 comments
Closed

Dropdown onChange #1571

raptoria opened this issue Apr 11, 2017 · 8 comments

Comments

@raptoria
Copy link

is there a way to get more than just the value from the onChange event? I'd like to get other values from the objects defined in options.

eg:

` const options = [
      { key: 1, text: 'Green', value: ComponentGroup.GREEN, color: 'green' },
      { key: 2, text: 'Red', value: ComponentGroup.RED, color: 'red'},
      { key: 3, text: 'Blue', value: ComponentGroup.BLUE, color: 'blue'},
    ]

    return (
         <Dropdown className={styles.root} options={options} onChange={this.selectGroup} pointing='top left' icon={null} trigger={
            <span><span className={styles.groupIcon} style={{ backgroundColor: this.state.groupColor}} />Group</span>
         } />
    );
  }

  private readonly selectGroup = (event: React.SyntheticEvent<HTMLDivElement>, data: any) => {
     this.props.setGroup(data.value);
     this.setState({ groupColor: data.color });
  }`
@mihai-dinculescu
Copy link
Member

Sure you can do that.

data gives you all the props of the dropdown. You can use data.options.

@raptoria
Copy link
Author

data.options gives me all my options..how do I know which one got selected? is there an array index that I get with the event?

@mihai-dinculescu
Copy link
Member

data.value provides the selected value. You can use it to fetch the selected object from data.options.

@raptoria
Copy link
Author

but that would require looping through the array of objects and seeing which value equals data.value. It seems like if the array index was provided with the event it would be a lot more efficient.

@mihai-dinculescu
Copy link
Member

You shouldn't worry too much about iterating though an array. It's a fairly simple operation and a standard practice.

If you are keen on avoiding the iteration, you can have value store the index for each option.

@raptoria
Copy link
Author

oh, good idea :)

@cesarve77
Copy link

And if you have more than one option with the same value?

@levithomason
Copy link
Member

I would propose to keep your values unique. Consider also the reverse case, if there are several duplicate values, which one does the Dropdown select when used as a controlled component? There would be no way to know for sure.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants