Как реализовать выбор даты с редуксной формой - PullRequest
Новая
       7

Как реализовать выбор даты с редуксной формой

0 голосов
/ 11 декабря 2018

В моем приложении я использую Redux Form для создания DatePicker.Я реализовал это в соответствии с официальной документацией.

https://redux -form.com / 7.4.2 / examples / реагировать-виджеты /

Мой код- 

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import moment from 'moment'
import momentLocalizer from "react-widgets-moment";
import "react-datepicker/dist/react-datepicker.css";


class SearchPoiHistory extends Component {
  componentDidMount() {
    this.handleInitialize();
  }

  handleInitialize() {
    const initData = {
      createdTimestamp: moment().format("YYYY-MM-DD"),
      otherMemberName: "",
      otherMemberCity: ""
    };

    this.props.initialize(initData);
  }

  // renderField(field) {
  //   return <input type="text" {...field.input} />;
  // }

  renderDatePicker = ({ input: { onChange, value }, showTime })  =>{
    return (
      <DateTimePicker
        onChange={onChange}
        dateFormat="YYYY-MM-DD"
        value={input.value ? new Date(input.value) : null}
      />
    );
  }

  renderDropDown({ input }) {
    return (
      <div className="dropDown">
        <div className="select">
          <select value={input.value} {...input}>
            <option value="" selected>
              Select Name
            </option>
            <option value="A">A</option>
            <option value="B">B</option>
          </select>
        </div>
      </div>
    );
  }

  onSubmit(values) {
    console.log(values);
    console.log("Handling Search API");
    console.log(this.props);
    // this.props.propFromParent();
    this.props.propFromParent.action();
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form
        onSubmit={handleSubmit(this.onSubmit.bind(this))}
        className="searchForm"
      >
        <table>
          <thead>
            <th className="col-sm-2"> Date</th>
            <th className="col-sm-2">Other Member Name</th>
            <th className="col-sm-2">Other Member City</th>
          </thead>
          <tbody>
            <tr>
              <td>
                <Field
                  label="Date"
                  name="createdTimestamp"
                  showTime={false}
                  component={this.renderDatePicker}
                />
              </td>
              <td>
                <Field
                  label="Other Member Name"
                  name="otherMemberName"
                  component={this.renderDropDown}
                />
              </td>
              <td>
                <Field
                  label="Other Member City"
                  name="otherMemberCity"
                  component={this.renderField}
                />
              </td>
              <td>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    );
  }
}

function validate(values) {
  const errors = {};
  return errors;
}

export default reduxForm({
  form: "SearchForm",
  validate
})(SearchHistory);

Я получаю сообщение об ошибке «вход не определен».Я реализовал это аналогичным образом из документации, но не совсем уверен, где я ошибаюсь.

1 Ответ

0 голосов
/ 27 февраля 2019

используйте value вместо input.value

Вот пример, который я реализовал 

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import DateTimePicker from 'react-widgets/lib/DateTimePicker';
import moment from 'moment';
import momentLocaliser from 'react-widgets-moment';
import 'react-widgets/dist/css/react-widgets.css';

momentLocaliser(moment);

const renderDateTimePicker = ({ input: { onChange, value }, showTime }) => 
 <DateTimePicker
  onChange={onChange}
  format="DD MMM YYYY"
  time={showTime}
  value={!value ? null : new Date(value)}
/>

let ReactWidgetsForm = props => {
 const { handleSubmit, pristine, reset, submitting } = props
 return (
 <form onSubmit={handleSubmit}>
  <Field
   name="dob"
   showTime={false}
   component={renderDateTimePicker}
  />
 </form>
 )
}

ReactWidgetsForm = reduxForm({
 form: 'reactWidgets'
})(ReactWidgetsForm)

export default ReactWidgetsForm
...