无法在屏幕上使用带有 react-hooks-forms 的 react-datepicker 显示日期

Question

我正在 next.js 中制作一个表格，我将在其中存储日期和其他字段。

我正在使用 react-form-hooks 和 react-datepicker

问题： 当我点击提交时，我可以在 console.log 中看到日期条目，但在日期输入中看不到 selected 日期。详情请参考截图 screenshot

我遵循 https://codesandbox.io/s/react-hook-form-controller-079xx 中给出的示例，其中他们还使用带有 react-hooks-forms 的 react-datepicker

期望结果：当我select日期时，日期应出现在日期输入框中，例如：09/08/2020

下面是我写的代码。请帮助，谢谢

import Head from "next/head";
import DatePicker from "react-datepicker";
import { useForm, Controller } from "react-hook-form";

const Form = () => {
  const { register, handleSubmit, control } = useForm();
  const onSubmit = (data) => console.log(data);
  const [selectedDate, setselectedDate] = useState(null);
  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css"
        />
      </Head>
      <form onSubmit={handleSubmit(onSubmit)}>
        <section>
          <label>Created Date</label>
          <Controller
            as={DatePicker}
            control={control}
            valueName="selected"
            selected={selectedDate}
            onChange={(date) => setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
            name="DatePicker"
            defaultValue={null}
          />
          {/* <DatePicker
            selected={selectedDate}
            onChange={(date) => setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
          /> */}
        </section>
        <input type="submit" />
      </form>
    </>
  );
};

export default Form;

Answer 1

再见，你的问题出在 onChange 道具上。如果 valueName 属性设置为 selected，onChange 函数必须 returns selected 像这样：

onChange={([selected]) => {
   setselectedDate(selected);
   return selected;
}}

所以你的 DatePicker 变成：

<Controller
   as={DatePicker}
   control={control}
   valueName="selected"
   selected={selectedDate}
   onChange={([selected]) => {
      setselectedDate(selected);
      return selected;
   }}
   dateFormat="dd/MM/yyyy"
   placeholderText="Select Date"
   name="DatePicker"
   defaultValue={null}
/>

不仅如此，尽管您已经在 DatePicker 元素中设置了 dateFormat，要获取特定格式的数据，您需要 re-format 数据来自 form。由于 react-hooks-forms DatePicker 使用 moment 作为日期，我使用 moment 来格式化输出日期。

所以onSubmit函数变成了：

import moment from "moment";
...
const onSubmit = (data) => {
   console.log(moment(selectedDate).format("DD/MM/yyyy"));
};

Here codesandbox 已修改，显示我所做的。

无法在屏幕上使用带有 react-hooks-forms 的 react-datepicker 显示日期

Cannot display date with react-datepicker with react-hooks-forms on screen

datepicker

reactjs

next.js

react-datepicker

react-hook-form