React Redux-表单-集成数据选择器

Question

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

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

最近，有人要求我实现一个数据报警器。我们最初的选择是使用，但是我们不能将捕获的值发送到后端。

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

在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的datepicker在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。