如何在 React 无状态组件中引用“this”关键字

Question

Am trying to create a React Stateless Components for input range day picker using library day-picker .

If I try to convert the Stateful Component to Stateless, the this keyword is not accessible, since Stateless components doesn't have the scope for this .

Am very new to React and Hooks and gave my best to resolve, but somehow failed to resolve the problem, this is what I was trying.

Problem - Day picker range input is not working as expected. Always the calendar show start with current month. But somehow it is starting from last year.

Actual Code

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;

Answer 1

There are multiple things, you need to figure out / take into consideration while converting class based component to functional component.

Don't initialize your state with new Date() ,

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

Date format of new Date() and date format of your DayPickerInput is not same. So you need to keep it as undefined / convert the new Date() to format your DayPickerInput understands.

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

Another thing is, setState in class based component and functional component work a bit differently. setState in functional component don't have callback.

This setState is a bit wrong,

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

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

Here showFromMonth as callback will not work. You need a separate useEffect hook which will listen to state change and run side-effect / callback accordingly,

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])

You have provided ref to your second date picker,

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

You should create a ref variable separately and not directly use state as ref .

let toInput = React.createRef();


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

I have made some modifications to your code according to actual code you provided in question.

Demo