Question

我正在使用material-ui-next组件选择。它运作得相当好。

我使用它的一个地方是Ag-Grid的单元格元素。在这个用例中，我使用的是多选功能。它运作得相当好。

一个小烦恼是每次用户点击一个元素来选择它时关闭下拉菜单，这样为了选择多个元素，用户必须重复点击Select元素，每次都打开它的下拉菜单他或她选择另一个元素。

我注意到material-ui-next网站（https://material-ui-next.com/demos/selects/）上的示例元素不是这样的。我看不出我的代码和他们的示例网站上的代码之间有任何显着差异。我的代码基本上是：

import React from 'react';
import Select from 'material-ui-next/Select';
import { MenuItem } from 'material-ui-next/Menu';

export class CellRenderer extends React.Component {
    constructor(props) {
        super(props);
        this.state = this.props.value;
    }
    componentWillReceiveProps(newProps) {
        this.setState(newProps.value);
    }
    render() {
        var items = ["a","b","c","d"];
        var separator = ";";
        var multiple = true;
        var selects = this.state.split(separator);

        var cellHandler = this.props.cellHandler;
        const onChangeHandler = (event) => {
            var newValue = event.target.value.join(separator);
            cellHandler(newValue);
        };

        return (
            <Select value={selects} onChange={onChangeHandler} autoWidth={true} multiple={multiple} >
                {items.map(x => <MenuItem key={x} value={x}>{x}</MenuItem>)}
            </Select >
        );
    }
}

我的material-ui版本的yarn.lock条目：

material-ui-next@^1.0.0-beta.23:
  version "1.0.0-beta.23"
  resolved "https://registry.yarnpkg.com/material-ui-next/-/material-ui-next-1.0.0-beta.23.tgz#fe76ac6e5fcf85eaa574c24df1c89cbffdc179db"
  dependencies:
    babel-runtime "^6.26.0"
    brcast "^3.0.1"
    classnames "^2.2.5"
    deepmerge "^2.0.1"
    dom-helpers "^3.2.1"
    hoist-non-react-statics "^2.3.1"
    jss "^9.3.3"
    jss-preset-default "^4.0.1"
    keycode "^2.1.9"
    lodash "^4.17.4"
    normalize-scroll-left "^0.1.2"
    prop-types "^15.6.0"
    react-event-listener "^0.5.1"
    react-flow-types "^0.2.0-beta.6"
    react-jss "^8.1.0"
    react-popper "^0.7.4"
    react-scrollbar-size "^2.0.2"
    react-transition-group "^2.2.1"
    recompose "^0.26.0"
    scroll "^2.0.1"
    warning "^3.0.0"

Answer 1

我遇到了类似的问题，每种输入类型，包括多选，都在选择后开始关闭。我注意到这是由包装器对象（在我的例子中为网格）设置了一个键 (key={${Math.floor((Math.random() * 1000))}-min} ) 引起的（这显然会导致一些重新渲染或其他东西）。

make select component multiselect下拉列表保持打开

1 个答案: