Einstellen eines DefaultValue für TimePicker mit redux-form und materialUI?

Question

Ich kann keine Version von defaultValue (oder defaultTime oder sogar nur value) arbeiten für die Initialisierung eines TimePicker in Redux-Form aus Zustand. Alle anderen Felder werden korrekt ausgefüllt, aber die Datums-/Uhrzeitauswahl reagiert auf nichts. Hilfe ist muuuuch geschätzt!

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

Kann jetzt format = {null} zu Zeit verstreichen und Datumsauswahl dafür. Siehe Thread/geschlossen Problem hier: https://github.com/erikras/redux-form-material-ui/issues/37 und können Tweets anzuzeigen, die hier beginnen: https://twitter.com/megkadams/status/804363887428665345 und weiter hier: 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" 
    /> 

Answer 2

Zur Standardzeit von Timepicker eingestellt:

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

hier ein Arbeits JSFiddle ist: https://jsfiddle.net/mu5r94m6/2/

Answer 3

Sie this.props.pantry... in Ihrem renderGroups() verwenden.

Sie müssen bind dass this

fügen Sie ein constructor zur Klasse und bind auf diese Funktion nutzen zu verwenden, um der Lage sein, funktionieren

constructor(props) { 
    super(props); 
    this.renderGroups = this.renderGroups.bind(this); 
}