Question

我想更改react-select选项框的宽度。示例在这里=>

如果我的内容大于选项，则其显示水平滚动，但我不希望水平滚动。如何更改选项框宽度的大小？

另一件事是如何将所选值显示为CscID，甚至一个选项框显示CscID + CscDesc？现在，当我选择该选项时，其CscID + CscDesc将显示在所选框中。

这是我的选择=>

const formatOptionLabel = ({ CscID, CscDesc }) => (

            <div style={{ display: "flex"}}>
                <div>{CscID}</div>                
                <div>{CscDesc}</div>
            </div>
            );

const customStyles = {
                control: styles => ({ ...styles, }),
                option: (styles) => {

                  return {
                    ...styles,

                   width: '10000px',  //For testing                 

                  };
                },

              };

<Select 
        styles={customStyles} 

            formatOptionLabel={formatOptionLabel}
            getOptionValue={option =>
                `${option.CscID}`
              }
            options={datasource}            

        />

Answer 1

通常在用例中不更改包装元素的宽度。由于文本限制可以是任何限制，因此您不会根据文本设置选择的宽度，而是根据选择的宽度设置文本。表示选择内容将具有固定的宽度，超出固定宽度的文本必须通过css之类的css转换为省略号

.options-select {
     overflow: ellipsis
}

悬停时的省略号必须在工具提示中显示全名，以获得更好的用户体验。

Answer 2

有关调整大小的问题，您可以参考以下现有答案：React Select auto size width

对于第二个问题，我认为使用react-Select是不可能的。

如果您转到github并进一步研究react-Select的源代码，则可能会发现value属性的ValueType应该与options的OptionsType相同。

确切地说，代码是“ export type ValueType = OptionType | OptionsType | null | void;”，可以在react-select / packages / react-select / src / types.js
为方便起见，这是指向其源代码的链接，可以帮助您找出更多隐藏的行为：https://github.com/JedWatson/react-select/tree/master/packages/react-select/src

Answer 3

是的，我可以编辑选项框的宽度。

const customStyles = {
                control: styles => ({ ...styles,                 

                }),
                option: styles => ({ ...styles,                 

                }),
                menu: styles => ({ ...styles,                 
                 width: '500px'
                })                 

              };

根据文档，其称为菜单。如果要更新其他样式，请在此处检查=> Style Keys

此选项对于检查菜单框=> menuIsOpen={true}

非常有用

反应选择中选项框宽度的大小更改

3 个答案: