Question

我无法设置defaultValue（或defaultTime甚至只是value）的任何版本，以便从状态初始化redux-form中的TimePicker。所有其他字段填充正确，但日期/时间选择器不响应任何内容。帮助是muuuuch赞赏！

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import moment from 'moment';

import { Field, reduxForm, FieldArray, formValueSelector } from 'redux-form';
import MenuItem from 'material-ui/MenuItem';
import {
  SelectField,
  TextField,
  DatePicker,
  TimePicker
} from 'redux-form-material-ui';

const selector = formValueSelector('myPantry');

let ServiceGroup = ({ service, index, fields, isAppointment, serviceDate }) =>
  <div className="service-type-group" key={index}>
    <h4>Service</h4>
    <button
      type="button"
      className="remove-button"
      onClick={() => fields.remove(index)}>Remove
    </button>
    <div className="field-group third">
      <Field
        name={`${service}.day`}
        component={SelectField}
        floatingLabelText="Day of week"
        className="textfield">
          <MenuItem value={1} primaryText="Monday" />
          <MenuItem value={2} primaryText="Tuesday" />
      </Field>
      <Field
        name={`${service}.from_time`}
        component={TimePicker}
        value={null}
        floatingLabelText="From"
        className="textfield"
      />
      <Field
        name={`${service}.until_time`}
        component={TimePicker}
        value={null}
        floatingLabelText="To"
        className="textfield"
      />
    </div>
    <div className="field-group half">
      <Field
        name={`${service}.service_type`}
        component={SelectField}
        floatingLabelText="Service type"
        className="textfield">
        <MenuItem value={1} primaryText="First-come first-served" />
        <MenuItem value={2} primaryText="Appointment" />
      </Field>
    </div>
    {isAppointment &&
      <div className="field-group sentence-inline">
        <Field
          name={`${service}.max_people`}
          type="number"
          component={TextField}
          label="Number of people per timeslot"
          className="textfield"
        />
      </div>
    }
  </div>;

ServiceGroup = connect(
  (state, props) => ({
    isAppointment: selector(state, `${props.service}.service_type`) == 2,
    serviceDate: selector(state, `${props.service}.from_time`)
  })
)(ServiceGroup);

class MyPantry extends Component {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired
  }

  constructor(props, context) {
    super(props, context);
  }

  renderGroups = ({ fields, meta: { touched, error } }) => {
    return (
      <div>
        {fields.map((service, index) =>
          <ServiceGroup service={service} fields={fields} index={index} key={index} />
        )}
        <button
          type="button"
          className="action-button"
          onClick={() => fields.push({})}>Add Service
        </button>
        {touched && error && <span>{error}</span>}
      </div>
    );
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div className="section general">
          <Field
            name="name"
            type="text"
            component={TextField}
            label="Pantry name"
            floatingLabelText="Pantry name"
            className="textfield full"
          />
          <div className="field-group half">
            <Field
              name="address_street_1"
              type="text"
              component={TextField}
              label="Address"
              floatingLabelText="Address"
              className="textfield"
            />
            <Field
              name="address_street_2"
              type="text"
              component={TextField}
              label="Apartment, suite, etc."
              floatingLabelText="Apartment, suite, etc."
              className="textfield"
            />
          </div>
        </div>
        <h3 className="section-title">Service Setup</h3>
        <div className="section service">
          <FieldArray name="service_options" component={this.renderGroups} />
        </div>
        <div>
          <button type="submit" className="action-button">Save Pantry Details</button>
        </div>
      </form>
    );
  }

}

MyPantry = reduxForm({
  form: 'myPantry'
})(MyPantry);

MyPantry = connect(
  state => ({
    initialValues: state.pantry.data
  })
)(MyPantry);

export default MyPantry;

Answer 1

设置TimePicker的默认时间：

<TimePicker hintText="Pick your time" defaultTime={new Date(2007, 11, 5, 8, 23, 17)} />

这是一个有效的JSFiddle：https://jsfiddle.net/mu5r94m6/2/

Answer 2

您在renderGroups()内使用bind。

您需要this该功能才能使用constructor

在课程中添加bind并在该功能上使用constructor(props) { super(props); this.renderGroups = this.renderGroups.bind(this); }

d = {
    'last_price': '760.54',
    'change': 'N/A',
    'days_range': '760.00 - 775.00',
    'previous_close': '771.23',
    'change_percent': '-1.39%', 
}

Answer 3

现在可以将format = {null}传递给时间和日期选择器。请在此处查看主题/已结束问题：https://github.com/erikras/redux-form-material-ui/issues/37 并且可以查看从此处开始的推文：https://twitter.com/megkadams/status/804363887428665345并在此处继续：https://twitter.com/megkadams/status/804369699693793280

    <Field
      name={`${service}.from_time`}
      component={TimePicker}
      format={(value, name) => {
        if (fromTime) {
          return value === '' ? null : new Date(fromTime)
        } else {
          return null;
        }
      }}
      defaultValue={null}
      pedantic
      floatingLabelText="From"
      className="textfield"
    />

使用redux-form和materialUI为TimePicker设置defaultValue？

3 个答案: