阵营选择自动尺寸宽度

Question

当使用react-select它是由选项值不自动调整大小，但使用width:100%你可以在图片中看到：

选项有短：

getOptions() { 
    return [ 
     { value: 'AND', label: 'AND' }, 
     { value: 'OR', label: 'OR' } 
    ] 
} 

和产生它的代码：

<Select 
    options={this.getOptions()} 
    value={value} 
    autosize={true} 
    clearable={false} 
    simpleValue 
/> 

是否有任何方法可以使react-select显示这些值与自动调整大小，所以选择框将与选项长度相同，我可以，例如，在<div>中居中选择框？

更新2017年11月14日 完整的示例可以在此jsFiddle

Answer 1

方案可以看出1

您可以利用通过更新作出反应的inline styles根据所选择的选项的长度组件的width 。

让我进一步解释一下：说选定的值是HelloWorld。该字符串的长度为10。我们可以猜测，每个角色平均每个角色的说明都是8px（总猜测我根本没有线索）。因此，这个单词的宽度大约是8*10=80px，对吧？此外，还有一些控制字（卡尔特和十字）后面，我们需要一些最小填充：它们可能在一起宽度为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。

对于这项工作的反应，这里是一个片段：

<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中的一个工作示例。

最终，您想调整规则和平均值以满足您的需求。我还建议您根据所选值中的大小写字母数量来应用字母大小。

SOLUTION 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（我改变了一些例子为了更好地说明）

告诉我你的想法。 :)