反应语义UI Dropdown 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

据我所知，因为你正在使用Dropdown.Menu这里面Dropdown的onChange将无法正常工作。 适用于正常的下拉菜单（例如选择一个值等）。 尝试创建一个通用的onClick并将其分配给<Dropdown.Item />

Answer 2

吉里的答案是正确的。 更改此行

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中的Dropdown.Menu，因此单击菜单上的项目不会自动更改Dropdown的值。 （这就是为什么不触发Dropdown组件的onChange事件的原因）。 您需要在反应状态下保存Dropdown的当前值，并手动设置Dropdown的trigger道具，使其看起来像所选项目。