带有日期选择器范围的 React Hook Form 不选择日期

Question

我得到了以下日期选择器。
对于开始日期：

<Controller
    as={
        <DatePicker
            selected={travelRoute?.dateStart || new Date()}
            selectsStart
            startDate={travelRoute?.dateStart}
            endDate={travelRoute?.dateEnd}
            inline
        />
    }
    control={control}
    rules={{ required: true }}
    valueName="selected"
    onChange={date => handleStartDateOnChange(date)}
    name="dateStart"
    placeholderText="Select date"
    defaultValue={null}
/>  

结束日期：

<Controller
   as={
    <DatePicker
        name="dateEnd"
        selected={travelRoute?.dateEnd || new Date()}
        onChange={date => handleEndDateOnChange(date)}
        selectsEnd
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        minDate={travelRoute?.dateStart}
        inline
    />
   }
   control={control}
   rules={{ required: true }}
   valueName="selected"
   onChange={date => handleEndDateOnChange(date)}
   name="dateEnd"
   placeholderText="Select date"
   defaultValue={null}
/>  

我是否需要将 datepicker 道具添加到 datepicker 组件或 Controller 组件？
开始日期选择器不会 select 日期和结束日期选择器不会更改开始日期并且不显示范围。

我正在使用在 handleOnChange 函数中发生的 setTravelRoute 将数据保存到 travelRoute state 中。

编辑：
添加了 onChange 处理程序：

const handleStartDateOnChange = date => {
    setTravelRoute(prevState => ({
        ...prevState,
        dateStart: date
    }))
};

const handleEndDateOnChange = date => {
    setTravelRoute(prevState => ({
        ...prevState,
        dateEnd: date
    }))
};

Answer 1

Ciao，您使用错误的方法在DatePicker中自定义onChange事件。 Controller上的onChange事件也无法正常工作。 因为在这种情况下，您不必使用as=语法，而是使用render=语法，例如：

<Controller
    render={({ onChange }) => (
      <DatePicker
        ...
        onChange={date => handleStartDateOnChange(date)}
      />
    )}
    ...
  />

所以你的代码变成：

开始日期

<Controller
    render={({ onChange }) => (
      <DatePicker
        selected={travelRoute?.dateStart || new Date()}
        selectsStart
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        inline
        onChange={date => handleStartDateOnChange(date)}
      />
    )}
    control={control}
    rules={{ required: true }}
    valueName="selected"
    name="dateStart"
    placeholderText="Select date"
    defaultValue={null}
  />

结束日期

<Controller
    render={({ onChange }) => (
      <DatePicker
        name="dateEnd"
        selected={travelRoute?.dateEnd || new Date()}
        onChange={date => handleEndDateOnChange(date)}
        selectsEnd
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        minDate={travelRoute?.dateStart}
        inline
      />
    )}
    control={control}
    rules={{ required: true }}
    valueName="selected"
    name="dateEnd"
    placeholderText="Select date"
    defaultValue={null}
  />

这是一个工作示例。

注意：我不知道为什么 Codesandbox 中的DatePicker看起来这么难看。 可能是Controller因为在这个其他代码框看起来不错。

Answer 2

我对解决这个问题有不同的方法，并想分享它。

我在以下帖子中回答了一些相关问题： https://stackoverflow.com/a/72585781/19320134

无论如何，使代码更可重用的一种方法是将这些控制器放在单独的文件中，以便在调用它们时只导入 function 名称。

export const DateRange = ({ name, control, label }) => {
const [dateRange, setDateRange] = useState([null, null]);
const [startDate, endDate] = dateRange;
 

return (
   <Controller
     //is a prop that we get back from the useForm Hook and pass into the input.
     control={control}
     //is how React Hook Form tracks the value of an input internally.
     name={name}
     //render is the most important prop; we pass a render function here.
     render={({
       //The function has three keys: field , fieldState, and formState.
       field, // The field object exports two things (among others): value and onChange
     }) => (
       <>
         <DatePicker
           selectsRange={true}
           startDate={startDate}
           endDate={endDate}
           onChange={(e) => {
             setDateRange(e);
             field.onChange(e);
           }}
           isClearable={true}
           className="form-control"
         />
       </>
     )}
     rules={{
       required: `The  ${label} field is required`,
     }}
   />

你可以像这样在必要的文件中调用它

import { useForm, Controller, FormProvider } from "react-hook-form";
import {DateRange} from "./your file !"

const defaultValues = {
  dateRange: [],
};

export default function ComponentUsingDateRange() {
const methods = useForm({
    defaultValues,
    mode: "onChange",
    });

    const { register, handleSubmit, control, setValue } = methods;

     return(
      <>
       <FormProvider {...methods}>
        <DateRange
         control={control}
         name="dateRange"
         label="Range of dates"
        />
       </FormProvider>
     </>
       
     );
}