0

我是 React 新手,我的第一个项目涉及创建一个表单(使用react-hook-form创建),其中包括日期选择器(使用React Datepicker)。到目前为止一切正常,除了我的日期选择器,当点击它时不会用新选择的日期更新表单字段。

项目结构如下:

index.js 
   V
Form.js
   V
ChooseInputType.js (this is looking at a json file of the form questions and choosing what form input to display)
   V
FormDate.js (A date picker will be shown if the json file says it's a date field).

FormDate.js

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { Controller } from 'react-hook-form';
function FormDate({ name, question, register, control, type }) {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <DatePicker
              selected={startDate}
              onChange={date => setStartDate(date)}
              selectsStart
              startDate={startDate}
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
        />
      </div>
    </div>
  );
}
export default FormDate;

我已经根据react-hook-form Controller 文档使用了 Controller 组件,因为我最终需要使用条件逻辑并认为这是正确的做法?但除此之外,它似乎与日期范围示例代码相同。我从其他地方收到了一个提示,问题如下:

问题是您包含日期选择器的控制器组件。它们正在使用 onChange 回调并且不允许它传播子组件。

通过阅读文档,您只能在其中使用不受控制的组件,例如 html 标签,任何需要 React 直接操作其状态的东西都可以在这里发挥作用。

您必须查看从表单元素(例如日期选择器)传递所需的数据,备份到主表单并编译您需要手动提交的内容。您可以使用回调、React.context 或其他一些全局状态管理系统(如 Redux)将数据从组件传回。就个人而言,我建议在应用程序的复杂性仍然可控的情况下坚持回调,并且仅在事情开始变得非常复杂时才查看其他选项。

有没有人可以帮助我(作为菜鸟!)了解如何做到这一点,也许有一个例子?或者有什么文件可以帮助我吗?

非常感谢,

凯蒂

4

1 回答 1

1

按照比尔在我原始问题所附评论中的回答,我修改了我的代码,使其看起来像这样,它现在更新了控制器内的日期字段!谢谢比尔。Bill 还提供了如何使用具有许多不同类型输入的控制器的示例,因此如果您觉得这很有用,请给他一个感谢。

import React from 'react';
import ReactDatePicker from 'react-datepicker'; 
import 'react-datepicker/dist/react-datepicker.css';
import { Controller } from 'react-hook-form';
function FormDate({ name, question, register, control}) {
  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <DatePicker
              dateFormat="dd/MM/yyyy"
              placeHolderText="Select date"
              className="input"
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected" //This is key!
          onChange={([selected]) => selected} //This is key!
        />
      </div>
    </div>
  );
}
export default FormDate;

我想格式化日期,这是一个有用的道具列表,您可以将其传递到日期选择器组件中

再次感谢比尔 - 你的例子是一个很好的帮助!

于 2020-03-20T11:03:04.137 回答