方案可以看出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(我改變了一些例子爲了更好地說明)
告訴我你的想法。 :)
感謝您的答案和工作示例。它似乎工作,但我注意到,「SECONDONE」(選項2)存在問題。我有選擇字段與動態選項(他們可以是短期或長期),我需要的解決方案,將適用於所有情況。有沒有其他的方法來實現它,或者只能通過調整字母大小/大小寫設置? – Orbitum
@Orbitum微調字母大小可以改善用戶體驗。否則,我編輯我的答案,包括一個純粹的CSS解決方案。我沒有嚴格測試它,告訴我它是否更適合您的需求。 –
CSS解決方案也很棒,但是同樣存在「SECONDONE」(options2)的問題。你可以請,檢查它,所以我可以接受你的答案? – Orbitum