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

Question

我是React的新手，我的第一个项目涉及创建一个包含日期选择器的表单(使用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表单Controller文档使用了Controller组件，因为我最终需要使用条件逻辑，并认为这是正确的做法？但除此之外，它似乎与日期范围示例代码相同。我从其他地方收到了一个提示，问题如下：

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

通过阅读文档，您只能使用不受控制的其中的组件，比如html标记，任何需要React直接操纵它们的状态。

您必须考虑从表单中传递所需的数据元素，比如你的日期选择器，备份到你的主表单编译需要手动提交的内容。你可以通过使用回调、React.conf或其他一些全球状态管理系统，如Redux。就我个人而言建议在应用程序复杂的情况下坚持回调仍然可以管理，并且只有在情况开始时才考虑其他选项变得非常复杂。

有人能帮助我(作为一个傻瓜！(理解如何做到这一点吗？也许可以举个例子？或者有什么文件可以帮助我吗？

非常感谢，

Katie

Answer 1

根据Bill在我原始问题所附评论中的回答，我已经将代码修改为这样，现在它更新了Controller中的日期字段！谢谢比尔。Bill还包括了如何将Controller与许多不同类型的输入一起使用的示例，因此，如果您觉得这很有用，请向他表示感谢。

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;

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

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