反应选择自动调整宽度

内联样式不适合我。 我只是将Select组件包装在一个div中,并为div提供了我想要的宽度。

<div style={{width: '300px'}}>
  <Select 
    menuPlacement="auto"
    menuPosition="fixed"
    etc, etc..
  />
</div>

解决方案1

inline styles 通过更新组件的 width

让我进一步解释一下:假设所选值为 HelloWorld . 这根绳子很长 10 . 我们可以猜测每个字符都可以解释 8px 8*10=80px 正当此外,单词后面有一些控件(carret和cross),我们需要一些最小的填充:它们一起可能是 100px 宽度现在你有了它:你的div的宽度应该是 ( 8px * 10 letters ) + 100px = 180px

更准确地说,正确的公式如下:

(average_letter_size * selected_value.length) + other_elements_sizes

什么时候 selected_value length ,因此div的宽度将用新的总数更新。

示例:如果选定值现在为 Lorem Ipsum dolor sit amet ,长度现在为 26 . 通过应用公式,我们得到了更大的宽度: (8px * 26 letters) + 100px = 308px .

为了在react中实现这一点,这里有一个片段:

<Select
  style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}            
  className="select-custom-class"
  name="form-field-name"
  value={this.state.selectedOption2}
  options={options2}
  onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
 />

如你所见,我补充道:

style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}

请参阅下面的工作示例 fiddle .

解决方案2 (编辑)

如果你愿意的话,我提出了一个纯CSS解决方案。它应该根据您的设计进行更好的测试,但这应该是可行的:

/* .Select-value comes with an absolute position to stack it below .Select-input */
/* we need to scratch that in order for us to be able to let the div grow depending on its content size */
.Select-placeholder, .Select--single > .Select-control .Select-value {
  position: relative;
  padding-left: 0;
}

/* All these 3 classes come with ugly "table" display...*/
.Select-control, .Select-clear-zone, .Select-arrow-zone {
  display: inherit;
}

/* here is the trick: we display the wrapper as flex in order to make it fit in height*/
/* we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right */
.select-custom-class .Select-multi-value-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

/*we put our controls back to a better center position */ 
.Select-clear-zone {
  position: absolute;
  top: 8px;
  right: 20px;
}

.Select-arrow-zone {
  position: absolute;
  top: 8px;
  right: 0px;
}

fiddle

告诉我你的想法。:)

如果您使用的是react select v3,则可以使用customStyles对象:

const customStyles = {
  container: provided => ({
    ...provided,
    width: 150
  })
};

<Select
    styles={customStyles}
    {...otherProps}
/>

这是我从 aidan-keay 上 repo thread

menu: (base) => ({
      ...base,
      width: "max-content",
      minWidth: "100%"
 }),

9/2020

嘿,伙计们:)这个解决方案比这个变通方法简单多了!

__placeholder , __single-value

只需将此css添加到两者,您将获得自动大小的react select

.CUSTOM_PREFIX__single-value,
.CUSTOM_PREFIX__placeholder {
    position: static;
    transform: none;
    max-width: none;
  }

classNamePrefix 将等于 CUSTOM_PREFIX

classNamePrefix="CUSTOM_PREFIX"

2021 9月(react select v4)

正在添加 position: static 和 transform: none

  placeholder: (provided) => ({
    ...provided,
    position: 'static',
    transform: 'none',
  }),
  singleValue: (provided) => ({
    ...provided,
    position: 'static',
    transform: 'none',
  }),

.myCustomPrefix__value-container > div {
  width: auto !important;
}

classNamePrefix="myCustomPrefix" 在组件中( docs ).

旧答案:

见官方文件 https://react-select.com/styles#style-object

我原本以为是这样 width option 为我工作:

const customStyles = {
    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
      return {
        ...styles,
        fontSize: '12px',
        textAlign: 'left',
        width: 'auto',
      }
    },
  }

...

return (
    //https://react-select.com/props
    <AsyncSelect
      components={animatedComponents}
      isMulti
      // isDisabled={isLoading}
      // isLoading={isLoading}
      onChange={handleChange}
      onInputChange={handleInputChange}
      cacheOptions
      defaultOptions
      defaultMenuIsOpen={false}
      closeMenuOnSelect={closeMenuOnSelect}
      placeholder={placeholder}
      loadOptions={promiseOptions}
      value={selectedOptions}
      styles={customStyles}
      formatOptionLabel={formatOptionLabel}
    />
  )