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

我正在尝试选择菜单上的活动。＆＃39;的onClick＆＃39;正在以类似的方式工作，但菜单选择没有任何事件。

Answer 1

AFAIK，因为您在此Dropdown.Menu中使用Dropdown，onChange将无效。它适用于普通的Drodowns（比如选择一个值等）。尝试创建通用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中使用Dropdown.Menu，点击菜单上的项目不会自动更改Dropdown的值。（这就是Dropdown组件的事件的onChange未被触发的原因）。您需要将Dropdown的当前值保存在react状态，并手动设置Dropdown的trigger道具，使其看起来像所选项目。

React semantic-ui Dropdown onChange不起作用

2 个答案: