Не срабатывает onchange в React Datepicker?

Question

[Andrew Chil]

Добрый день! Объясните пожалуйста почему React при onchange в datepicker не вставляет дату, которую выбираю (просто оставляет дату которая есть)? В консоли показывает нормальную дату(MM/DD/YYYY), ошибок никаких не выбивает. Использую react/redux.
Вот код, рендрерю в другом компоненте...

import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
const DayPickerSection = ({}) => {
    return (
        <div>
            <DatePicker selected={moment()}
                        onChange={(date) => moment(date).format('MM/DD/YYYY')}/>
        </div>
    );
};

export default DayPickerSection;

Или в redux нужно сам change делать в action или где-то еще?
Буду благодарен за помощь!

Answer 1

[Максим]

У вас на onChange функция, которая просто форматирует дату. И все, я даже затрудняюсь сказать, какой от этого будет эффект, но помоему никакой.

Нужно на onChange прокидывать функцию - создатель действия, например, у нас это будет myAction.

Следовательно, где-то там в actions будет примерно такой код:

export function myAction(date) {
  return {
    type: 'CHANGE_DATE',
    data: date
  }
}

Затем где-то в редьюсере, должно быть соответствующее условие, например, на case 'CHANGE_DATE' у вас будет устанавливаться в current дата. (специально не пишу код, чтобы немного поработали сами).

В конце концов, в вашем контейнере, у вас должны быть mapStateToProps и mapDispatchToProps примерно такого вида:

const mapStateToProps = (state) => ({
  dates: state.dates,
})

const mapDispatchToProps = (dispatch) => ({
  myAction: (date) => dispatch(myAction(date)),
})

Ну и само подключение DayPickerSection будет выглядеть примерно так:

<DayPickerSection selected={this.props.dates.current}  myAction={this.props.myAction} />

А в рендере (имеется в виду в рендере DayPickerSection) будет следовательно:

const DayPickerSection = ({selected, myAction}) => {
    return (
        <div>
            <DatePicker selected={selected}
                        onChange={(date) => myAction(date) }/>
        </div>
    );
};

Итого (читать медленно): в onChange компонента DatePicker попадет свойство this.props.myAction "прокинутое" в DayPickerSection. В свою очередь, в DayPickerSection это свойство будет равно функции, которая будет "прокинута" с помощью mapDispatchToProps в this.props контейнера. Контейнер, называйте его как хотите, в нашем случае это родительский элемент, например, который "приконекчен" (c помощью функции connect), и который из-за этого принимает к себе в this.props данные описанные в mapStateToProps и в mapDispatchToProps, которые в свою очередь являются чем то вроде карты. То есть, в конечном счете в this.props.myAction вашего контейнера попадет функция myAction из вашей папки actions. Конечно, для этого ее нужно импортировать в начале файла (import { myAction } from '../actions'.)

Контейнер может выглядеть так:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { myAction } from '../actions'

class App extends Component {
  render() {
    const { dates, myAction } = this.props

    return (
      <div className='my-app'>
        <DayPickerSection selected={dates.current}  myAction={myAction} />
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  dates: state.dates,
})

const mapDispatchToProps = (dispatch) => ({
  myAction: (date) => dispatch(myAction(date)),
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

Comments

[Andrew Chil]

Спасибо за подробный ответ! Но все таки не хватило ума сделать.) Ниже вопрос, если не трудно взгляните пожалуйста..

Answer 2

[Andrew Chil]

Просмотрев много примеров сделал следующим образом ...
В Devtools.Instrumet() все записывается, state изменяется, но дата в инпуте - нет. Не могу понять в чем проблема.

//Action 
export function checkDate(changeDate) {
    return {
        type: types.CHANGE_DATE,
        changeDate
    };
}

//component/DatePickerSection
import React, { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DayPickerSection = ({selected, changeDate}) => {
    console.log(selected);
    return (
        <div>
            <DatePicker selected={selected}
                        onChange={changeDate}/>
        </div>
    );
};

DayPickerSection.propTypes = {
    selected: PropTypes.object,
    changeDate: PropTypes.func
};

export default DayPickerSection;

// containers/DatePickerCont

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {checkDate} from '../actions';
import moment from 'moment';
import DayPickerSection from '../components/DayPickerSection';

const DatepickerCont = ({dates, changeDate}) => {
    return (
        <div className="my-app">
            <DayPickerSection selected={moment(dates)} changeDate={(date)=> changeDate(moment(date).format('MM/DD/YYYY'))}/>
        </div>
    );
};

DatepickerCont.propTypes = {
    dates: PropTypes.object,
    changeDate: PropTypes.func
};

const mapStateToProps = (state) => {
    return {
        dates: state.dates
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        changeDate: date => dispatch(checkDate(date))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(DatepickerCont);


//reducer

const changeDate = (state = '', action) => {
    switch (action.type) {
        case types.CHANGE_DATE:
            return action.changeDate;
        default:
            return state;
    }
};

Comments

[Максим]

pastebin.com/F92iQCbv

[Andrew Chil]

Максим: console.log(state) - выводит объект с экшенами, где в changeDate - дата которую я выбрал, то есть все нормально, но в инпуте ничего не меняется.

[Максим]

Andrew Chil: почему должно менять? если у вас объект со свойством changeDate, значит и "мапить" вы должны как dates: state.changeDate

[Максим]

Andrew Chil: а если у вас мапилось на state.dates - то откуда этому свойству "dates" было взяться? Поэтому я спросил "почему должно менять". По моему, вам нужно подтянуть основы JS. Так будет продуктивнее.

[Andrew Chil]

Максим: Что тогда делает mapDispatchToProps? Получается можно обойтись одним аргументом (DatePicker selected={selected} и также DayPickerSection selected={moment(dates)} ) ?