React-typescript: кнопка переключения не работает - PullRequest
Новая
       80

React-typescript: кнопка переключения не работает

0 голосов
/ 18 июня 2020

Я использую React-typescript для своего приложения. Я использовал библиотеку response-datepicker , чтобы выбрать дату. Я хочу создать компонент Datepicker, поэтому я могу использовать его для своего другого компонента. Я использовал переключатель, по умолчанию он говорит «выбрать дату». После выбора даты я хочу указать дату выбора внутри кнопки. Но после выбора даты он не заполняет дату, а просто показывает «выбрать дату». Я использую onChange для выбора даты. Мой onChange работает нормально. Просто функция onClick не работает. это из-за функции handleChange функция onClick не работает?

Это мой компонент Datepicker 

import React from "react";
import DatePicker, { ReactDatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import { Button } from "components/buttons";

export interface IDatepicker {
  value?: Date;
  onBlur?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onFocus?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onChange: (i: Date) => void;
  buttonComponent?: JSX.Element;
  withPortal?: boolean;
  showTimeSelect?: boolean;
  dateFormat?: string;
  timeFormat?: string;
}

export default ({
  value,
  onChange,
  onBlur,
  onFocus,
  buttonComponent,
  withPortal = false,
  showTimeSelect = false,
  dateFormat = "MMMM d, yyyy h:mm aa",
  timeFormat = "HH:mm"
}: IDatepicker) => {
  const handleChange = (date: Date | null) => {
    date && onChange(date);
  };
  const [choose, setChoose] = React.useState(false)

  return (
    <div style={{ display: "flex" }}>
      <DatePicker
        selected={value}
        onChange={handleChange}
        showTimeSelect={showTimeSelect}
        dateFormat={dateFormat}
        timeFormat={timeFormat}
        customInput={
          <Button onClick={() => setChoose(choose => !choose)}>
            {choose ? moment(value)
              .format("MMMM Do YYYY")
              .toString() : "choose date"}
          </Button>
        }
      />

    </div>

  );
};

Это компонент, который я использую для datepicker 

import React from "react";

    import TimeLine from "components/datepicker";


    export default () => {
    const [state, setState] = useState(new Date());
      return (
        <div>
          <TimeLine
             value={state}
              onChange={setState}
          />
        </div>
      );
    };
...