Я борюсь с этим.
Я пытаюсь построить календарь, используя пакет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);