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处反正。