Question

我尝试使用Redux Form创建这样的东西：

问题在于我有田间年龄。并且我无法获得两个值（它只存储一个值）

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} />

如果您想在Redux状态下保存多个值，那么无论如何您都需要2个位置。

Redux范围选择器

1 个答案: