时间戳

首页 > 解决方案 > 如何使用回调将数据从 React 组件中传递出去？

reactjs - 如何使用回调将数据从 React 组件中传递出去？

问题描述

我是 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）将数据从组件传回。就个人而言，我建议在应用程序的复杂性仍然可控的情况下坚持回调，并且仅在事情开始变得非常复杂时才查看其他选项。

有没有人可以帮助我（作为菜鸟！）了解如何做到这一点，也许有一个例子？或者有什么文件可以帮助我吗？

非常感谢，

凯蒂

标签： reactjsstatereact-datepickerreact-hook-form

解决方案

按照比尔在我原始问题所附评论中的回答，我修改了我的代码，使其看起来像这样，它现在更新了控制器内的日期字段！谢谢比尔。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;

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

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

推荐阅读