React semantic-ui Dropdown onChange not working

Question

Here's the code:

class MenuContainerComponent extends Component {

    onInputWidgetMenuChange(event, data) {
        console.log(data);
    }

    render() {
        var inputWidgets = [];
        for (var i = 0; i < this.props.cdata.widgets.inputWidgets.length; i++) {
            var componentName = getComponentNameFromType(this.props.cdata.widgets.inputWidgets[i]);
            var key = "inputWidget" + i;
            inputWidgets.push(<Dropdown.Item key={key}>{componentName}</Dropdown.Item>);
        }

        return (
        <Dropdown style={childStyle} text='Input widgets' icon='keyboard' floating labeled button className='icon' onChange={this.onInputWidgetMenuChange}>
            <Dropdown.Menu>
                <Dropdown.Header icon='tags' content='Select a widget to add to canvas' />
                <Dropdown.Divider />
                {inputWidgets}
            </Dropdown.Menu>
        </Dropdown>
        )
}

I am trying to get an event on menu selection. 'onClick' is working in similar fashion but there is no event on menu selection.

Have you tried onChange={(e) => this.onInputWidgetMenuChange(e)} — Siya Mzam
– Siya Mzam, Commented Jan 14, 2018 at 18:36

Cloud Engineer · Accepted Answer · 2018-01-14 19:23:01Z

8

AFAIK, since you're using Dropdown.Menu inside this Dropdown, the onChange won't work. It's for normal Drodowns (like selecting a value etc). Try creating a generic onClick and assign it to <Dropdown.Item />

answered Jan 14, 2018 at 19:23

Cloud Engineer

2751 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anish Singh Over a year ago

Tried doing "displayWidgets.push(<Dropdown.Item key={key} onClick={this.onInputWidgetMenuChange}>{componentName}</Dropdown.Item>);". This also does not work.

Cloud Engineer Over a year ago

What's the error? Doesn't onInputWidgetMenuChange get called? If not, check for this.

Cloud Engineer Over a year ago

footnote: Use Array.map() instead of for. Less clutter :)

PrashanD Over a year ago

Yeah, this works. (solution is obvious after you read it :O) Should be the accepted answer

PrashanD · Accepted Answer · 2018-03-15 05:51:39Z

Giri's answer is correct. Change this line

inputWidgets.push(<Dropdown.Item key={key}>{componentName}</Dropdown.Item>);

to

inputWidgets.push(<Dropdown.Item key={key} value={componentId} onClick={this.onInputWidgetMenuChange}>{componentName}</Dropdown.Item>);

Where componentId is the actual value of the Dropdown.Item, (as opposed to the text displayed). Given the right circumstances componentId can be the same as the componentName too.

Another thing is that since you're using Dropdown.Menu inside the Dropdown, clicking the items on the menu won't automatically change the value of the Dropdown. (which is why the onChange of event the Dropdown component isn't fired). You need to save the current value of the Dropdown in the react state and manually set the trigger prop of Dropdown to make it look like the selected item.

Collectives™ on Stack Overflow

React semantic-ui Dropdown onChange not working

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related