React Date Picker多范围与React Hook形式

Question

我们使用React Hook形式的原因是，它降低了我们的状态计数并提高了性能。但是我不知道在使用一个datepicker的日期范围时该怎么做。 如何将两个数据保留在一个控制器中？

`() => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      inline
    />
  );
};`

如果此代码是我的代码，我只能在选定中捕获一个值，但是我需要返回2个值。如何通过React Hook形式以最佳方式使用它？

 <Controller
            name="orderDate"
            control={control}
            render={({ field }) => (
              <DatePicker
                selected={field.value}
                onChange={(date) => field.onChange(date)}
                selectsRange
              />
            )}
          />

Answer 1

我上周遇到了完全相同的问题，这是解决方案...

您只需要通过（至少）将“ Controller函数”，您仅使用字段对象实现这一目标。

在任何情况下，当使用 datepicker组件用于日期范围时，它将需要两位矢量数据类型，其中开始和结束日期以字符串存储。但是，如果您尝试通过 onchange函数来操纵和控制此组件，来自reck-hook-form，它会搞砸整个事情，因为是为一对一的数据通量制造的。然后这些过程是单独完成的，但是向量仍将向量发送到控制器。这是代码！

              const [dateRange, setDateRange] = useState([null, null]);
              const [startDate, endDate] = dateRange;
              <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`,
                }}
              />