React semantic-ui下拉onChange不工作

Question

代码如下：

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>
        )
}

我正在尝试获取关于菜单选择的事件。“onClick”以类似的方式工作，但在菜单选择上没有事件。

Answer 1

AFAIK，由于您在此Dropdown中使用了Dropdown.Menu，因此onChange将无法工作。它用于正常的下拉(比如选择一个值等)。尝试创建通用onClick并将其分配给<Dropdown.Item />

Answer 2

Giri的答案是正确的。更改此行

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

至

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

其中componentId是Dropdown.Item的实际值(与显示的文本相反)。在适当的环境下，componentId也可以与componentName相同。

另一件事是，由于您在下拉列表中使用Dropdown.Menu，单击菜单上的菜单项不会自动更改下拉列表的值。(这就是为什么Dropdown组件的事件的onChange不会被激发)。您需要在react状态下保存Dropdown的当前值，并手动设置Dropdown的trigger属性，使其看起来像选定的项目。