範圍條形式爲

我有一個範圍欄，我從反應滑塊創建。我想以一種簡約形式來使用它。我的問題是值不返回。更具體地說，當我sumbit我的表單時，其他字段返回值，而此範圍欄返回未定義。我如何必須使用範圍在還原形式？我的代碼是範圍條形式爲

<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 prop。它必須實現redux-form的界面（見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

即時通訊編寫導入從'反應'反應; 從'rc-slider'導入{Range}; import'rc-slider/assets/index.css'; const MyRange =（props）=> { const value = props.input.value; const onChange = props.input.onChange;返回（ <範圍值= {值} onChange = }; 導出默認MyRange;錯誤顯示value.map不是一個函數..你知道它是什麼意思嗎？ – user7334203

我也遇到了這個錯誤。我已將修復作爲新答案發布。 –

我碰到的這個問題，只是現在，由於maddox2的答案讓我沿着正確的路線，但是，正如一位用戶在上面的評論中指出的，上面的解決方案將給出TypeError: value.map is not a function。

若要解決此問題，需要在使用reduxForm()創建表單時明確設置initialValues中字段的類型。示例代碼如下。

說明如何使用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

範圍條形式爲

回答

相關問題