Невозможно передать значение родительскому компоненту в React.Js - PullRequest
0 голосов
/ 27 мая 2018

Я борюсь с этим.

Я пытаюсь построить календарь, используя пакетact-calendar.В одном месте моего приложения мне нужен доступ к значению календарного месяца.Я вызываю свойство компонентов onActiveDateChange, которое я нашел в документации по компоненту (Reaction-calendar).Это действительно обратный вызов, поэтому я пытаюсь использовать его как возможность извлечь значение месяца и отправить его в родительский компонент.Но это не работает, не только значение не изменяется, как ожидалось, но календарь перестает работать.Вы знаете, что вызывает это?Я пытался также с установкой состояния в обратном вызове, но тот же результат, значение не является правильным.

Вот мой кусок кода:

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import ChooseHour from './ChooseHour';
import { connect } from 'react-redux';
import * as actions from '../actions';

class Calendario extends Component {
    state = { showHours: false,}


    onChange = date => this.setState({ 
        date }, () => {
            const { chosenRoom } = this.props;
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const fullDate = `${year}/${month}/${day}`;
            const roomAndDayObj = {fullDate, chosenRoom};
            this.props.sendRoomAndDay(roomAndDayObj); 
        }
    )

    onClickDay(e) {
        this.setState({ showHours: true });
    } 

    passActiveDate(activeDate) {
        const monthAfterPress = activeDate.getMonth() + 1;
        console.log(monthAfterPress);
// this is weird in my opinion, I can log it and it works as expected, 
// when I'm firing the next line the values are incorrect


        // this.props.activeMonthToPass(monthAfterPress); //this line makes a problem
    }

    render() { 
        const { booked } = this.props;
        return ( 
        <div>
            <div className="calendarsCont">
                <Calendar
                    onChange={this.onChange}
                    onClickDay={(e) => this.onClickDay(e)}
                    onActiveDateChange={({ activeStartDate }) => this.passActiveDate(activeStartDate)}
                    value={this.state.date}
                    locale="pl-PL"
                    tileDisabled={({date, view }) => 
                    date.getDate()===15 && date.getMonth()===6 && date.getFullYear()===2018}
                />
            </div> 
            <div>
                {this.state.showHours ? 
                    <ChooseHour chosenDay={this.state.date} chosenRoom={this.props.chosenRoom}/> : 
                null}
            </div>
        </div>
        )
    }
}


export default connect (null, actions)(Calendario);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...