2017-03-15 14 views
0

Als Neuling in React und Redux, versuche ich react-dates in einer Komponente zu verwenden.React-Dates in Komponente mit Redux

Dies ist mein Code:

import * as React from 'react'; 
import { connect } from 'react-redux'; 
import { ApplicationState } from '../store'; 
import * as DateState from '../store/Date'; 
import * as SingleDatePicker from 'react-dates'; 

type DateProps = DateState.DateState & typeof DateState.actionCreators; 

class DatePickerSingle extends React.Component<DateProps, any> { 

    public render() { 

     let { date } = this.props; 
     return (
      <div> 
       <SingleDatePicker 
        id="date_input" 
        date={this.props.date} 
        focused={this.state.focused} 
        onDateChange={(date) => { this.props.user({ date }); }} 
        onFocusChange={({ focused }) => { this.setState({ focused }); }} 
        isOutsideRange={() => false} 
        displayFormat="dddd LL"> 
       </SingleDatePicker> 
      </div> 
     ); 
    } 
} 

export default connect(
    (state: ApplicationState) => state.date, 
    DateState.actionCreators     
)(DatePickerSingle); 

Dies gibt den folgenden Fehler:

Exception: Call to Node module failed with error: TypeError: Cannot read property 'focused' of null 

focused ein onFocusChange sollte die "datepicker Zustand" erhalten, soweit ich verstehen.

Docs:

onFocusChange is the callback necessary to update the focus state in the parent component. It expects a single argument of the form { focused: PropTypes.bool }.

ich glaube, das Problem ist, dass ich die DateState in der DatePickerSingle Komponente injizieren, die nicht über focused Zustand nicht kennt.

Ist es möglich, meinen "eigenen" Status und den Status vom DatePicker zusammen zu verwenden? Oder was ist der beste Ansatz?

Ich versuche es schon eine ganze Weile, und ich hoffe, dass mir jemand dabei helfen kann.

UPDATE

enter image description here

Antwort

1

Die Antwort ist ganz einfach: this.state null ist, weil es nicht initialisiert wurde. Nur

hinzufügen
constructor() { 
    super(); 
    this.state = { 
    focused: false 
    } 
} 

Alles, was von redux kommt, wird zu Ihrer Komponente als props weitergegeben werden, können Sie Komponente Zustand zusätzlich zu dem, haben.

+0

Danke @OlliM! Obwohl ich jetzt den folgenden Fehler bekomme: 'Uncaught TypeError: Kann die Eigenschaft 'getHostNode' von null 'nicht lesen .. Wenn ich den Cursor auf' this.setState ({focused}) 'in Visual Studio bewege, gibt es immer noch nein "fokussiert" siehe Screenshot in meiner aktualisierten Frage. – JK87

+0

Hmm, dieser Fehler scheint gelöst zu sein, aber trotzdem bekomme ich diesen Fehler: 'Ausnahme: Call to Node Modul ist mit Fehler fehlgeschlagen: Invariant Violation: Elementtyp ist ungültig: erwartet eine Zeichenkette (für eingebaute Komponenten) oder eine Klasse/Funktion (für Composite-Komponenten) aber habe: Objekt. Überprüfen Sie die Rendermethode von "DatePickerSingle". – JK87

+0

Das Problem wurde gefunden. Das Attribut date in der Komponente "singledatepicker" hat ein Momentjs [link] (https://momentjs.com/) -Objekt erwartet. In meinem Reducer habe ich es bereits formatiert, so dass es zu einer Zeichenkette wurde. Alles funktioniert wie erwartet. Danke für Ihre Hilfe! – JK87

Verwandte Themen