0

React と Redux の初心者として、コンポーネントでreact-datesを使用しようとしています。

これは私のコードです:

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

これにより、次のエラーが返されます。

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

focusedonFocusChange私が理解している限り、「日付ピッカーの状態」を受け取る必要があります。

ドキュメント:

onFocusChange は、親コンポーネントのフォーカス状態を更新するために必要なコールバックです。{ focused: PropTypes.bool } という形式の単一の引数が必要です。

問題は、状態を知らないコンポーネントにを注入DateStateすることだと思います。DatePickerSinglefocused

「自分の」状態と DatePicker の状態を一緒に使用することは可能ですか? または、最善のアプローチは何ですか?

私はかなり長い間試していますが、誰かがこれで私を助けてくれることを願っています.

アップデート

ここに画像の説明を入力

4

1 に答える 1