4

我已经用 ValueContainer 修改了一个多反应选择组件，因此如果选择了多个选项，则只显示一个选项，括号中是额外选择的选项的数量。代码如下所示：

        ValueContainer = ({ children, getValue, ...props }) => {
            let values = getValue();
            let valueLabel = "";

            if (values.length > 0) valueLabel += props.selectProps.getOptionLabel(values[0]);
            if (values.length > 1) valueLabel += ` (${values.length})`;

            // Keep standard placeholder and input from react-select
            let childrenToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

            return (
            <components.ValueContainer {...props}>
                {!props.selectProps.inputValue && valueLabel }
                { childrenToRender }
            </components.ValueContainer>
            );
        };


        customStyles = {
            valueContainer: (provided, state) => ({
              ...provided,
              textOverflow: "ellipsis",
              //maxWidth: "90%",
              //whiteSpace: "nowrap",
              overflow: "hidden",
              display: "initial"
            })
        };

//inside render()
            const employeeFilter = (
                                    <div className="multi-select col-6 col-md-3 filter-element btn">
                                        <span className="filter-label">Filter by employee(s)</span>
                                        <Select
                                            options={this.props.employeeProps.employeeData}
                                            onChange={this.handleEmployeeChange}
                                            value={selectedEmployee}
                                            isMulti={true}
                                            inputId='clickableInput'
                                            components={{
                                                ValueContainer
                                            }}
                                            closeMenuOnSelect={false}
                                            hideSelectedOptions={false}
                                            styles={customStyles}
                                            isSearchable={false}
                                        />
                                    </div>
            );

ValueContainer 和 customStyles 是在 React 组件之前定义的，它在我的开发机器上运行良好。但是，在生产中它不能正常工作：

  • 在下拉列表之外单击不会关闭它（如在开发机器上）
  • 占位符文本几乎不可见（该区域的高度很小）

原因似乎是缩小过程。我在 webpack 中使用 TerserPlugin。使用 UglifyJS 不是一个选项，因为我正在编写 ES6 代码（这里的建议：为什么 Webpack 4 缩小会阻止 react-select 组件的样式？）

我尝试了该线程中的所有内容https://github.com/JedWatson/react-select/issues/2597但无法使其正常工作。可能是我对 react-select 中的组件系统如何工作缺乏了解（我从示例中获取了代码）。

感谢您提供任何帮助！

4

0 回答 0