Как обрабатывать выбор таймпикера в reactjs

Question

У меня есть поля временного диапазона timefrom и timetill

timefrom не должно быть больше timetill

Только после выбора timefrom и timetill значение должно отображаться в текстовом поле.

например, если выбраны timefrom - «1:00» и timetill - 4:00, он отображается в текстовом поле. затем очистите timefrom и timetill для следующего выбора

вот код:

import React from "react";
import "./styles.css";
import TimeComponent from "./TimeComponent"
export default function App() {
  return (
    <div className="App">
      <TimeComponent/>
    </div>
  );
}

Песочница: https://codesandbox.io/embed/optimistic-spence-4jnuk?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Что вам нужно, так это вызвать метод buttonHanlder для onClose метода TimePicker. Это означает, что когда вы выбрали нужное время и нажали где-нибудь еще, чтобы закрыть всплывающее окно, оно вызовет это событие, а затем обновит состояние (если, конечно, обе записи времени не пусты)

          <TimePicker
            onClose={this.buttonHanlder}
            value={
              moment(this.state.timeto, "HH:mm").isValid()
                ? moment(this.state.timeto, "HH:mm")
                : ""
            }
            onChange={time => this.handleChange(time, "timeto")}
            showSecond={false}
          />

и удалите вызов на handleChange

Отметьте эту песочницу

https://codesandbox.io/s/hungry-flower-4ph42