2017-10-04 101 views
2

當使用react-select它是由選項值不自動調整大小,但使用width:100%你可以在圖片中看到:陣營選擇自動尺寸寬度

Select with short values

選項有短:

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

回答

2

方案可以看出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(我改變了一些例子爲了更好地說明)

告訴我你的想法。 :)

+0

感謝您的答案和工作示例。它似乎工作,但我注意到,「SECONDONE」(選項2)存在問題。我有選擇字段與動態選項(他們可以是短期或長期),我需要的解決方案,將適用於所有情況。有沒有其他的方法來實現它,或者只能通過調整字母大小/大小寫設置? – Orbitum

+0

@Orbitum微調字母大小可以改善用戶體驗。否則,我編輯我的答案,包括一個純粹的CSS解決方案。我沒有嚴格測試它,告訴我它是否更適合您的需求。 –

+0

CSS解決方案也很棒,但是同樣存在「SECONDONE」(options2)的問題。你可以請,檢查它,所以我可以接受你的答案? – Orbitum