如何使用回调从React组件传递数据？

Question

我是React的新手，我的第一个项目涉及创建一个包含日期选择器（使用React Datepicker）的表单（使用react-Hook-form创建）。到目前为止，一切正常，除了我的日期选择器，当单击时，它不会用新选择的日期更新表单字段。

该项目的结构如下：

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）将数据从组件传递回来。就我个人而言，我建议在应用程序的复杂性仍然可以管理的情况下坚持回调，只有在事情开始变得非常复杂时才考虑其他选项。

有人能帮我吗（作为一个傻瓜！）了解如何做到这一点，或许可以举个例子？或者是否有任何文档可以帮助我？

非常感谢,，

凯蒂

Answer 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;

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

再次感谢比尔-你的例子是一个了不起的帮助！