2017-08-03 74 views
0

我想呈現幾個塊必須包含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這個櫃檯我試圖畫出正確數量的選擇

+0

在其他父組件中有3個「選擇」組件?爲別的地方?現在3個選擇都在相同的組件內,這意味着它們共享相同的狀態/道具... – WilomGfx

+0

@WilomGfx讓我們說我們有1個主要組件選擇,我們必須在這裏生成幾個