Redux的範圍選擇

Question

我試圖做這樣的事情用終極版形式：

Age range selector

的問題是，我有外地的年齡。我不能讓它有兩個值（它只存儲一個值）

let options = [1,2,3,4,5,6,7]; // etc... a lot of ages 
    // field is a redux field 

    // Minimum 
    <select {...age} value={age|| 'select'} multi={true}> 
    <option key='default' value='default'>Select</option> 
    {      
     options.map(option => 
     <option key={option}>{option}</option> 
    )     
    } 
    </select> 

// Maximum 
    <select {...age} value={age|| 'select'} multi={true}> 
    <option key='default' value='default'>Select</option> 
    {      
     options.map(option => 
     <option key={option}>{option}</option> 
    )     
    } 
    </select> 

我不想這樣做：

let options = [1,2,3,4,5,6,7]; // etc... a lot of ages 
    // field is a redux field 

    // Minimum 
    <select {...minimumAge} value={minimumAge|| 'select'} multi={true}> 
    <option key='default' value='default'>Select</option> 
    {      
     options.map(option => 
     <option key={option}>{option}</option> 
    )     
    } 
    </select> 

// Maximum 
    <select {...maximumAge} value={maximumAge|| 'select'} multi={true}> 
    <option key='default' value='default'>Select</option> 
    {      
     options.map(option => 
     <option key={option}>{option}</option> 
    )     
    } 
    </select> 

Answer 1

難道是創建一個組件的選項你多次使用？

// SelectComponent 
const { options, field } = this.props; 
<select {...field} value={field.value || 'select'} multi={true}> 
    <option key='default' value="select">Select</option> 
    {      
    options.map(option => 
     <option key={option}>{option}</option> 
    )     
    } 
</select> 

然後使用它們像這樣：

const ages = [ 1, 2, 3, 4, 5, 6, 7 ]; 
<SelectComponent options={ages} field={minAge} /> 
<SelectComponent options={ages} field={maxAge} /> 

如果你想保存在你的終極版狀態多個值，你需要在你的狀態2處反正。