DateTimePicker Redux Formular Feld Probleme

Question

Ich habe vor kurzem auf redux-form v6 aktualisiert, und meine material-ui benutzerdefinierte Datetime Picker funktioniert nicht mehr. Hier ist, was es sieht aus wie jetzt:

class DateTimePicker extends React.Component { 
    handleDateChanged(e, value) { 
    let currentTime; 
    if (this.props.dateField.value) { 
     let currentValue = moment(this.props.dateField.value); 
     currentTime = currentValue.subtract(currentValue.clone().startOf('day')); 
    } 
    let newValue = moment(value).startOf('day').add(currentTime || 0); 
    this.props.dateField.onChange(newValue.toDate()); //this.refs.timePicker goes undefined when this line runs. 
    this.refs.timePicker.openDialog(); 
    } 
    handleTimeChanged(e, value) { 
    return this.props.dateField.onChange(value); //This is called, but the value does not change. 
    } 
    formatDate(value) { 
    return moment.tz(value, this.props.timezone).format('M/D/YY HH:mm zz'); 
    } 
    render() { 
    return (
     <span> 
     <DatePicker 
      value={this.props.dateField.value || null} 
      autoOk={true} 
      maxDate={new Date()} 
      floatingLabelText="Change At" 
      floatingLabelStyle={{pointerEvents: 'none'}} 
      errorText={this.props.dateField.touched && this.props.dateField.error} 
      formatDate={this.formatDate.bind(this)} 
      onChange={this.handleDateChanged.bind(this)} 
     /> 
     <TimePicker 
      style={{display: 'none'}} 
      value={this.props.dateField.value || null} 
      format="24hr" 
      hintText="Time" 
      ref="timePicker" 
      onChange={this.handleTimeChanged.bind(this)} 
     /> 
     </span> 
    ); 
    } 
} 

Und es ist in der Form verwendet, wie so:

<Field 
    name="changeAt" 
    component={({input}) => { 
    return <DateTimePicker dateField={input} timezone={this.props.driver.homeTerminal.timezone} /> 
    }} 
/> 

Ich habe zwei verschiedene Probleme.

Erstes Problem: Wenn ich einen Tag auswählen, wird handleDateChanged wie erwartet aufgerufen. Wenn die Methode startet, bezieht sich this.refs.timePicker erwartungsgemäß auf die Zeitauswahl. Wenn die darüber liegende Zeile jedoch ausgeführt wird (this.props.dateField.onChange(newValue.toDate())), gehen die Refs verloren und ändern sich in this.refs.timePicker in undefined.

Jede weitere Zeit, die ich ein Datum auswählen, Refs sind nicht verloren, und es funktioniert einwandfrei.

Zweites Problem: Wenn ich eine Zeit wählen, handleTimeChanged aufgerufen, die this.props.dateField.onChange(value) mit dem richtigen Wert nennt; Der Wert wird jedoch nicht geändert.

Alle Vorschläge sind willkommen.

Answer 1

Ich bin neu in diesem Zeug, also weiß ich nicht, ob ich viel nutzen werde. Aber das zweite Problem an: Der einzige Unterschied zwischen meinem Code und deinem ist, dass ich <DatePicker ... onChange={this.props.onChange} /> mache. Alternativ könnten Sie

constructor(){this.handleChange = this.handleChange.bind(this)} 

tun und dann die Bindung in der render() -Methode entfernen. Die Rendermethode wird jedes Mal aufgerufen, wenn sich die (Requisiten?) Ändern und das Problem möglicherweise mit dieser Bindung zu tun hat.

Die docs dazu: http://redux-form.com/6.0.0-rc.4/docs/faq/CustomComponent.md/

Ich bin auch ein Element reagieren anstelle einer Komponente verwendet wird, und es kommt ganz sauber aus.

const DateInput = ({ input, label, meta: { touched, error } }) => (
<DateTimeField onChange={input.onChange} /> 
); 

mit

<Field name="date" component={DateInput} label="Date & Time Starting" /> 

Die oben arbeitet, vielleicht könnten Sie versuchen, von dort laufen und das Hinzufügen von Code, bis das Problem reproduziert wird?

Answer 2

Antwort zuunterst und arbeiten Sie sich verschiedene Implementierungen gerecht zu werden:

https://github.com/erikras/redux-form-material-ui/issues/37

Es ist ein Objekt zu wollen, genauer gesagt ein Date-Objekt.

format={(value) => value === '' ? null : new Date(value)}