레인지 모양의 범위 막대

나는 반응 슬라이더에서 만드는 범위 막대가 있습니다. 나는 그것을 redux 형태로 사용하고 싶다. 내 문제는 값이 반환되지 않는다는 것입니다. 좀 더 구체적으로 말하자면,이 범위 막대가 undefined를 반환하는 동안 내 양식을 질의하면 다른 필드는 값을 반환합니다. 어떻게 redux-form에서 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 소품에 어떤 임의의 구성 요소를 통과 할 수있다. 그것은 redux-form (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} 
/>

출처

2017-02-17 17:05:06 madox2

감사합니다. :) – user7334203

Im writing import React 'react'; 'rc-slider'에서 가져 오기 {Range}; 'rc-slider/assets/index.css'을 가져 오십시오. const MyRange = (props) => { 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을 줄 것입니다.

이 문제를 해결하려면 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)

출처

2018-01-21 20:01:07

레인지 모양의 범위 막대

답변

관련 문제