Question

我正在使用react-slider，它与redux形式兼容，我希望它具有我通过的默认值。我的组件如下所示：

export default field => (
  <div>
    <Range
      onChange={field.input.onChange}
      value1={field.input.value1 ? field.input.value1 : field.min}
      value2={field.input.value2 ? field.input.value1 : field.max}
      // min={0}
      // max={162}
      defaultValue={[field.min, field.max]}
    >
      {field.children}
    </Range>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);

我在这里渲染：

<Field
                            id="value-slider"
                            name="value-slider"
                            component={MyRange}
                            min={minPrice}
                            max={maxPrice}
                          />

但它似乎不起作用。我缺少什么想法？

Answer 1

我找到了一个解决方案：我已经像这样编辑了我的Range组件：

export default field => (
  <div>
    <Range
      {...field}
      onChange={field.input.onChange}
      value1={field.input.value1}
      value2={field.input.value2}
      // min={0}
      // max={162}
      // defaultValue={[0, 162]}
    >
      {field.children}
    </Range>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);

然后我添加

min={minPrice}
                            max={maxPrice}
                            defaultValue={[minPrice, maxPrice]}

具有redux形式的react-ranger中的默认值

1 个答案: