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