レスキュー形式のレンジバー

Question

私は反応スライダから作成するレンジバーを持っています。私はそれをredux形式で使いたい。私の問題は、値が戻っていないということです。より具体的には、私は私のフォームを嘆くとき、このレンジバーがundefinedを返す間、他のフィールドは値を返します。どのように私はredux形式で範囲を使用する必要がありますか？私のコードは

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

Answer 1

component propには渡すことはできません。それはredux形式のインタフェース（usageを参照）を実装する必要があります。Rangeはありません。短い、渡された要素でinput.value小道具からinput.onChangeと表示値と最小トリガイベントでなければなりません。そして、

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

そして、それを使用する：私はちょうど今、この問題に遭遇しました

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

Answer 2

、のおかげでしかし、私が正しい行に沿って設定した答えに対してmaddox2が使用されていますが、上記のコメントに1人のユーザーが指摘したように、上記の解決方法はTypeError: value.map is not a functionとなります。

これを修正するには、reduxForm()を使用してフォームを作成するときに、フィールドのタイプをinitialValuesに明示的に設定する必要があります。コードの例を以下に示します。 Rangeによって使用される追加的な小道具もprops小道具にReduxRangeに渡され、そしてこれらはその後ラッピング成分中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)