react语义用户界面下拉 onChange 不起作用

IT技术 reactjs semantic-ui
2021-04-29 22:02:24

这是代码:

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

2个回答

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

吉里的回答是正确的。改变这一行

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

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

componentIdDropdown.Item 的实际值在哪里(与显示的文本相反)。在适当的情况下,componentId 也可以与 componentName 相同。

另一件事是,由于您在 Dropdown 中使用 Dropdown.Menu,单击菜单上的项目不会自动更改 Dropdown 的值。(这就是为什么不触发 Dropdown 组件的 onChange 事件的原因)。需要在react状态下保存Dropdown的当前值,手动设置triggerDropdownprop,让它看起来像选中的item。