Question

在我的应用程序中，我正在使用Redux Form创建datePicker。我已经按照官方文档的要求执行了此操作。

https://redux-form.com/7.4.2/examples/react-widgets/

我的代码-

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);

我收到“未定义输入”的错误。我已经以与文档类似的方式实现了该功能，但不确定该怎么做。

Answer 1

使用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

如何使用Redux Form实现日期选择器

1 个答案: