Диапазон значений в форме редукции

У меня есть диапазон, который я создаю из реагирующего слайдера. Я хочу использовать его в виде редукса. Моя проблема в том, что значения не возвращаются. Чтобы быть более конкретным, когда я переустанавливаю свою форму, другие поля возвращают значения, в то время как эта строка диапазона возвращает неопределенные. Как мне использовать Range в редукционной форме? Мой кодДиапазон значений в форме редукции

<FormGroup className="col-sm-3 "> 
     <Label for="value-slider">VALUE</Label>{' '} 
     <Field 
      id="value-slider" 
      name="value-slider" 
      component={Range} 
     /> 
     </FormGroup>

источник

2017-02-17 user7334203

Вы не можете передавать любой случайный компонент для component опоры. Он должен реализовать интерфейс редукс-формы (см. usage), что Range нет. Короче говоря, принятый элемент должен по крайней мере, инициирующего события с input.onChange и отображения значений из input.value реквизита:

const MyRange = props => (
    <Range value={props.input.value} onChange={props.input.onChange} /> 
)

, а затем использовать его:

<Field 
    id="value-slider" 
    name="value-slider" 
    component={MyRange} 
/>

источник

2017-02-17 17:05:06 madox2

Большое спасибо :) – user7334203

Im writing import React from 'react'; import {Range} из 'rc-slider'; импорт 'rc-slider/assets/index.css'; const MyRange = (реквизит) => { const value = props.input.value; const onChange = props.input.onChange; return ( <Значение диапазона = {значение} onChange = {onChange} /> ); }; экспорт по умолчанию MyRange; Ошибка показывает, что value.map не является функцией. Знаете ли вы, что это значит? – user7334203

Я тоже столкнулся с этой ошибкой. Я опубликовал исправление как новый ответ. –

Я столкнулся с этим вопросом только сейчас, благодаря maddox2 для ответа, который задал мне правильные строки, однако, как указал один пользователь в комментариях выше, решение выше даст TypeError: value.map is not a function.

Чтобы исправить это, вам необходимо явно указать тип поля в initialValues, когда вы используете reduxForm() для создания формы. Ниже приведен пример кода.

Обратите внимание, как дополнительные опоры, используемые Range также передаются ReduxRange в props реквизита, и которые затем передаются в Range в компоненте заворачивания.

import React from 'react'; 
import { Field, reduxForm } from 'redux-form' 

import Range from 'rc-slider/lib/Range'; 
import 'rc-slider/assets/index.css'; 

// initial wrapper - note alterations 
const ReduxRange = props => { 
    const { input: { value, onChange } } = props 
    return (
     <Range 
      value={props.input.value} 
      onChange={props.input.onChange} 
      {...props} 
     /> 
    ) 
} 


// the form 
export const SomeReduxForm = props => { 
    const { handleSubmit } = props; 
    // these props will get passed to the Range 
    const rangeProps = { 
     defaultValue:[2020, 2040], 
     marks:{ 
      2020: '2020', 
      2030: '2030', 
      2040: '2040', 
      2050: '2050', 
      2060: '2060', 
      2070: '2070', 
      2080: '2080', 
     }, 
     pushable:true, 
     allowCross:false, 
     min:2018, 
     max:2080, 
     step:1, 
    } 
    return (
     <section className="box box-default"> 
      <form> 
       <div className="box-header">Year Range</div> 
       <div className="box-body"> 
        <Field 
         name="yearRange" 
         component={ReduxRange} 
         props={rangeProps} 
        /> 
       </div> 
      </form> 
     </section> 
    ) 
} 

export default reduxForm({ 
    form: 'someReduxForm', 
    initialValues: { 
     yearRange: [2020, 2040] 
    } 
})(SomeReduxForm)

источник

2018-01-21 20:01:07

Диапазон значений в форме редукции

ответ

Смежные вопросы