@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 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
02 июн. 2024, в 09:22
5000 руб./за проект
02 июн. 2024, в 01:13
2000 руб./за проект
01 июн. 2024, в 23:49
50000 руб./за проект