Универсальный рецепт для любых сторонних компонентов.
1. Сторонний компонент, если он хороший, обычно ничего не знает о данных. Он их только отображает. Это то что нам нужно.
2. Раз компонент ожидает от нас данные, мы должны их в него передать. Например в контейнере СтраницаБилетов, у вас подключается компонент ВыборДаты. Супер, чтобы в ВыборДаты передать данные используются
props. Будет примерно так:
<ВыборДаты текущаяДата={Дата_из_стора/или роута} />
либо EN вариант:
<DatePicker current={myDate} />
3. Далее, у стороннего компонента (опять же, если он хороший) наверняка, есть какой-то onChange обработчик. Предположим, что он называется onDateChange. Следовательно, мы в контейнере подключаем AC (создатель действия, экшен), и передаем его в компонент. Выглядеть будет примерно так:
<DatePicker onDateChange={this.props.getTickets} />
либо русский вариант (просто для понимания, вдруг пригодится)
<ВыборДаты текущая={мояДата} onDateChange={this.props.загрузиБилеты} />
Причем, функция загрузки новых билетов для этой даты, это не что иное, как экспортируемая функция из папки с вашими экшенами.
---
Приведу пример с кодом, хотя так как я его вытащил с реального проекта, он может вас запутать некоторой сложностью:
Это мой компонент DayPicker, который внутри себя подключает компонент
DatePickerclass DayPicker extends Component {
constructor(props) {
super(props)
this.state = {
start: null,
}
}
componentWillMount() {
const { startTime } = this.props
this.setState({ start: startTime })
}
componentWillReceiveProps(nextProps) {
const { startTime } = nextProps
this.setState({ start: startTime })
}
render() {
const { start } = this.state
const { onDateChange } = this.props
return (
<section>
<div className='date-picker'>
<DatePicker
className='form-control'
placeholderText={'Введите дату'}
selected={moment(start)}
onChange={ (moment) => onDateChange('startTime', moment) }/>
</div>
</section>
)
}
}
Тем не менее, это компонент. И он должен как-то получать в себя данные. Это происходит в контейнере, кода там много, приведу кусочек:
// обработчик onDateChange
onDateChange(dateField, moment) {
const query = this.props.location.query
const nextQuery = {
...query,
[dateField]: moment.format('YYYY-MM-DD'),
}
// так как у меня все завязано на роутинге, здесь другой вызов ниже,
// но для простоты примеры, здесь необходимо вызвать экшен, например getTickets(dateField)
}
// это находится в render функции
const { startTime } = this.props
<div className='row row-margin'>
<div className='col-md-12'>
<DayPicker
onDateChange={this.onDateChange}
startTime={startTime}
/>
</div>
</div>
// ваш экшен getTickets(dateField) наверняка подключается так
import { getTickets } from '../../actions/TicketsActions'
//...
const mapDispatchToProps = (dispatch) => ({
getTickets: (dateField) => dispatch(getUsers(dateField)),
})
//...
// ваша переменная startTime наверняка приходит из редьюсера / роута, у меня из роута
const mapStateToProps = (state, ownProps) => ({
startTime: ownProps.location.query.startTime,
})
