范围条形式为

我有一个范围栏，我从反应滑块创建。我想以一种简约形式来使用它。我的问题是值不返回。更具体地说，当我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

范围条形式为

回答

相关问题