Как ссылаться на ключевое слово this в React Stateless Component - PullRequest
Новая
       46

Как ссылаться на ключевое слово this в React Stateless Component

0 голосов
/ 28 сентября 2019

Пытаюсь создать React Stateless Components для ввода диапазона дня с использованием библиотеки day-picker .

Если я пытаюсь преобразовать Stateful Component в Stateless, ключевое слово thisнедоступен, так как компоненты без состояния не имеют области действия для this.

Я новичок в React и Hooks и дал все возможное, чтобы решить, но почему-то не смог решить проблему, это то, что япытался.

Проблема - Вход диапазона выбора дня не работает, как ожидалось.Календарное шоу всегда начинается с текущего месяца.Но так или иначе это начинается с прошлого года.

Актуальный код 

import React, { useState } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import moment from 'moment';
import { formatDate, parseDate } from 'react-day-picker/moment';

import 'react-day-picker/lib/style.css';

const DayPickerRange = () => {
  const [days, setDays] = useState({
    from: new Date(),
    to: new Date(today.getTime() + 24 * 60 * 60 * 1000)
  });

  function showFromMonth() {
    const { from, to } = days;
    if (!from) {
      return;
    }
    if (moment(to).diff(moment(from), 'months') < 2) {
      // this.to.getDayPicker().showMonth(from);
      to.getDayPicker().showMonth(from);
    }
  }

  const handleFromChange = from => {
    // Change the from date and focus the "to" input field
    setDays({ from, to }, showFromMonth);
  };

  const handleToChange = to => {
    setDays({ from, to });
  };

  const { from, to } = days;

  const modifiers = {
    start: from,
    end: to
  };

  return (
    <div className="InputFromTo">
      <DayPickerInput
        value={from}
        placeholder="From"
        format="LL"
        formatDate={formatDate}
        parseDate={parseDate}
        dayPickerProps={{
          utc: true,
          selectedDays: [from, { from, to }],
          disabledDays: [{ before: new Date() }],
          toMonth: to,
          month: to,
          modifiers,
          numberOfMonths: 12,
          onDayClick: () => to.getInput().focus()
        }}
        onDayChange={handleFromChange}
      />
      <span className="InputFromTo-to">
        <DayPickerInput
          ref={el => {
            days.to = el;
          }}
          value={to}
          placeholder="To"
          format="LL"
          formatDate={formatDate}
          parseDate={parseDate}
          dayPickerProps={{
            selectedDays: [from, { from, to }],
            disabledDays: [{ before: new Date() }],
            modifiers,
            month: from,
            fromMonth: from,
            numberOfMonths: 12,
            utc: true
          }}
          onDayChange={handleToChange}
        />
      </span>
    </div>
  );
};

export default DayPickerRange;

1 Ответ

1 голос
/ 28 сентября 2019

Есть несколько вещей, которые вы должны выяснить / принять во внимание при преобразовании компонента на основе классов в функциональный компонент.

Не инициализируйте ваше состояние с помощью new Date(), 

const [days, setDays] = useState({
  from: new Date(),
  to: new Date(today.getTime() + 24 * 60 * 60 * 1000)
});

Формат даты new Date() и формат даты вашего DayPickerInput не совпадают.Поэтому вам нужно сохранить его как undefined / преобразовать new Date() в формат, понятный вашему DayPickerInput.

const [days, setDays] = useState({
  from: undefined,
  to: undefined
});

Другое дело, что setState в компонентах на основе классов и функциональных компонентах работают немного по-разному.setState в функциональном компоненте не имеет обратного вызова.

Это setState немного неверно, 

const handleFromChange = from => {
  // Change the from date and focus the "to" input field
  setDays({ from, to }, showFromMonth);
};

const handleToChange = to => {
  setDays({ from, to });
};

Здесь showFromMonth, поскольку обратный вызов не будет работать.Вам нужен отдельный useEffect хук, который будет прослушивать изменение состояния и запускать побочный эффект / обратный вызов соответственно, 

const handleFromChange = from => {
  // Change the from date and focus the "to" input field
  //This is functional setState which will only update `from` value
  setDays(days => ({
     ...days,
     from
  }));
};

const handleToChange = to => {
  //This is functional setState which will only update `to` value
  setDays(days => ({
    ...days,
    to
  }));
};

//This is useEffect hook which will run only when `to` value changes
useEffect(()=>{
  showFromMonth();
},[days.to, showFromMonth])

Вы предоставили ref вашему второму сборщику дат, 

ref={el => {
    days.to = el;
}}

Вы должны создать переменную ref отдельно и не использовать напрямую состояние как ref. 

let toInput = React.createRef();


ref={el => {
   toInput = el;
}}

Я сделал некоторые изменения в вашем коде в соответствии с Фактический код , который вы указали в вопросе.

Демо

...