我想呈現幾個塊必須包含select用react-select寫入。當我改變其中一個價值時,他們都會改變它們的價值。 我知道問題的關鍵狀態,但我無法想象如何通過另一種方式進行選擇更改。創建幾個與週期反應選擇
const options = [
{value: 'test1', label: 'First Text'},{value: 'test2', label: 'Second Text'}
]
class Selects extends React.Component {
constructor(props){
super(props)
this.state = {
selected : options[0]
}
}
changeHandler(option) {
this.setState({
selected : option.value
})
}
drawSelects(){
let numberOfSelects = 3;
let selects = [];
for (let i = 0; i < numberOfSelects; i++) {
selects.push(
<Select
value={this.state.selected}
options={options}
onChange={this.changeHandler.bind(this)}
searchable={false}
clearable={false}
/>
)
}
return selects;
}
render(){
return (
<div>
{this.drawSelects()}
</div>
)
}
}
P.S.當用戶點擊特殊按鈕時,主要目標是添加具有相同選項的新選擇。所以我有一個計數器的選擇和thx這個櫃檯我試圖畫出正確數量的選擇
在其他父組件中有3個「選擇」組件?爲別的地方?現在3個選擇都在相同的組件內,這意味着它們共享相同的狀態/道具... – WilomGfx
@WilomGfx讓我們說我們有1個主要組件選擇,我們必須在這裏生成幾個 – Ahcael
好的,在這種情況下,讓你的self是一個自定義選擇組件,它只是一個react-select組件,但它具有自己的狀態,而您的Selects擁有所有選擇的容器。 – WilomGfx