反应语义-ui下拉onChange不起作用答案

【问题标题】：React semantic-ui Dropdown onChange not working反应语义-ui下拉onChange不起作用
【发布时间】：2018-01-14 18:13:47
【问题描述】：

代码如下：

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' 的工作方式类似，但菜单选择没有事件。

【问题讨论】：

你试过onChange={(e) => this.onInputWidgetMenuChange(e)}

标签： reactjs semantic-ui

【解决方案1】：

AFAIK，由于您在此 Dropdown 中使用 Dropdown.Menu，因此 onChange 将不起作用。它适用于正常的 Drodowns（例如选择一个值等）。尝试创建一个通用的onClick 并将其分配给<Dropdown.Item />

【讨论】：

试过“displayWidgets.push({componentName});”。这也行不通。
错误是什么？ onInputWidgetMenuChange 不会被调用吗？如果没有，请检查this。
脚注：使用Array.map() 而不是for。减少混乱:)
是的，这行得通。（阅读后解决方案很明显：O）应该是公认的答案

【解决方案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的triggerprop，让它看起来像被选中的item。

【讨论】：