React-Redux-Form

Question

我是 redux 表单的新手，如果我使用了错误的术语，我深表歉意。

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

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

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

在渲染的 return 上（）-

<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 - 集成日期选择器

React-Redux-Form - Integrating date picker

javascript

reactjs

redux

redux-form