Question

我是redux表单的新手，如果我使用了错误的术语，那就很抱歉。

我一直在使用react-redux-form来处理我的redux和后端通信。 https://github.com/davidkpiano/react-redux-form

最近我被要求实施一个datepicker。我们最初的选择是使用Airbnb datepicker，但我们无法将捕获的值发送到后端。

也许显示我的代码更容易：

返回render（） -

<Form model="trip" onSubmit={(val) => this.handleSubmit(val)}>
    <Control.select model=".city">
        {getCities}
    </Control.select>

    <Control
        model=".travelDate"
        component={SingleDatePicker}
        mapProps={{
            onDateChange: props => props.onChange,
            onFocusChange: props => props.onChange,
            date: props => props.modelValue
        }}
    />
    <div>
        <Button name="Lets Begin!" buttonType="primary" />
    </div>
</Form>

我一直在做一些搜索，airbnb的react-datepicker与react-redux形式有点问题。如果有人知道任何更好的插件值得使用。请让我知道

感谢您的帮助，

Answer 1

react-datetime https://github.com/YouCanBookMe/react-datetime实现如下： -

form.js

<div className="md-grid"><p className="md-cell--3 subheading">Valid until</p>
      <div>
          <Control
              model='.valid_until'
              component={DateField}
              mapProps={{
                  value: (props) =>{return props.viewValue}
                }}
                />
      </div>
  </div>

Datefield.js

import React, {PureComponent, PropTypes} from "react";
import Datetime from 'react-datetime/DateTime';
require('react-datetime');


const DateComponent = (props)=> {

    return (
        <Datetime defaultValue={new Date()}
        value={props.value}
        {...props} 
        style={{width:'150%'}}/>
    );

};

export default DateComponent

其次，您可以使用react-md DatePicker https://react-md.mlaursen.com/components/pickers/date

React-Redux-Form - 集成日期选择器

1 个答案: