react-select 中的选项框宽度大小变化

Question

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

如果我的内容大于选项，它会显示水平滚动，但我不想要水平滚动。如何更改选项框宽度的大小？

另一件事是如何将 selected 值显示为 CscID，一个偶数选项框显示 CscID + CscDesc？现在，当我 select 选项时，它的 CscID + CscDesc 显示在 selected 框中。

这是我的 Select =>

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

您通常不会更改用例中环绕元素的宽度。由于文本限制可以是任意的，因此您不会根据文本设置 select 的宽度，而是根据您的 select 的宽度设置文本。这意味着 select 将具有固定宽度，超过固定宽度的文本必须通过 css 转换为省略号，如

.options-select {
     overflow: ellipsis
}

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

Answer 2

关于调整大小的问题，您可以参考现有的答案：

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

如果你去github进一步查看react-Select的源代码，你可能会发现值属性的ValueType应该与OptionsType相同选项。

准确的说代码是“export type ValueType = OptionType | OptionsType | null | void;”，可以在react-select/packages/react-select/src/types.js中找到
为方便起见，这是link源代码，可以帮助您找出更多隐藏行为：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}

react-select 中的选项框宽度大小变化

Option box width size change in react-select

css

reactjs

react-select