Задать вопрос
@uzi_no_uzi

Как вызвать рендер компонента, если отрендерился другой?

Имеется такой компонент для выборки даты.

class DatePickerBtn extends React.Component {
    constructor() {
        super();

        this.state = {
            startDate: new Date("2014/02/2"),
            endDate: new Date("2014/02/10"),
        }
    }

    setStartDate(date) {
        this.setState({
            startDate: date,
        })
    }

    setEndDate(date) {
        this.setState({
            endDate: date,
        })
    }

    render() {

        const CustomInput = ({ value, onClick }) => (
            <div className="date-picker-btn" onClick={onClick}>
              <div className="date-picker-btn__icon-wrap">
                <svg className="date-picker-btn__date-icon">
                    <use xlinkHref='#calendar' />
                </svg>
              </div>
              <div className="date-picker-btn__value">
                {value}
              </div>
              <svg className="date-picker-btn__drop-icon">
                <use xlinkHref='#arrow-top' />
              </svg>
            </div>
        );

        console.log(this.props.selectsStart, this.props.selectsEnd)

        let picker = '';
        if(this.props.selectsStart) {
            picker = <DatePicker
            selectsStart
            selected={this.props.selectsStart ? this.state.startDate : this.state.endDate}
            onChange={this.props.selectsStart ? date => this.setStartDate(date) : date => this.setEndDate(date)}
            customInput={<CustomInput />}
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            />
        } else {
            picker = <DatePicker
            selectsEnd
            selected={this.props.selectsStart ? this.state.startDate : this.state.endDate}
            onChange={this.props.selectsStart ? date => this.setStartDate(date) : date => this.setEndDate(date)}
            customInput={<CustomInput />}
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            minDate={this.state.startDate}
            />
        }

        return(
            <div>{picker}</div>
        )
    }
}


Каждый компонент отмечен красным на скриншоте

5ec56eb8eb6fb866939090.png

Когда меняется дата на одном, нужно перерендерить и второй компонент, как это можно сделать?
  • Вопрос задан
  • 338 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы