从焦点切换到模糊

Question

我有一个父组件，它将onFocus和onBlur道具传递到子组件（日历组件）。一切都在按预期的方式进行，在外部单击时以及选择日期/日期时除外，但是在将div聚焦后单击div时，它不能按预期方式工作-不会转换回0。我想要实现的目标就是说，当焦点对准后单击它时，它将失去焦点-转换回0。

父项如下：

class Parent extends Component<Props, State> {
  state = {
    translateOffset: 0,
  };

  handleCalendarFocus = () => {
    this.setState({
      translateOffset: 100,
    });
  };

  handleCalendarBlur = () => {
    this.setState({
      translateOffset: 0,
    });
  };

    return (
    .....

    <Child
          onFocus={this.handleCalendarFocus}
          onBlur={this.handleCalendarBlur}
          onDateChange={onDateChange}
        />
    ....

    );
}

export default Parent;

这是孩子

type Props = {
  onDateChange: Function,
  onFocus: Function,
};

export default class Child extends Component<Props, State> {
  static defaultProps = {
    onFocus: () => {},
    onBlur: () => {},
  };

handleClickOutside = (event: SyntheticMouseEvent<EventTarget>) => {
    this.props.onBlur();

    const currentNode = ReactDOM.findDOMNode(this);
    if (currentNode && !currentNode.contains(event.target)) {
      this.setState({ calendarOpen: false });
    }
  };

  handleCalendarClick = () => {
    this.props.onFocus();
    this.setState({ calendarOpen: !this.state.calendarOpen });
  };

  handleMonthChange = (_event: any, newMonth: moment) => {
    this.setState({ month: newMonth });
  };

  handleDaySelect = (_event, day: moment) => {
    this.props.onDateChange(day);
    this.props.onBlur();

    this.setState({ day, calendarOpen: false, dateSelected: true });
  };

  render() {
    const { dateSelected, calendarOpen } = this.state;
    return (
      <div>
        <div onClick={this.handleCalendarClick}>
          <h5 className={css.heading}>{t('heading')}</h5>
          <p className={css.dateText}>{this.dateDisplayText()}</p>
        </div>
        {this.state.calendarOpen && (
          <div className={css.calendarDropdown}>
            <DayPicker
              month={this.state.month}
              onInteraction={this.handleDaySelect}
              onMonthChange={this.handleMonthChange}
              dayProps={{ getDayState: this.getDayState }}
            />
          </div>
        )}

      </div>
    );
  }
}

在自己的div上单击时，如何从onFocus切换到onBlur？

我应该改为使用状态吗？