Как вы передаете данные из компонента React с помощью обратного вызова?

Question

Я новичок в React, и мой первый проект включает создание формы (созданной с помощью response-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;

Я использовал компонент Controller согласно документация контроллера формы реакции-ловушки , поскольку мне, в конечном счете, нужно будет использовать условную логику c и подумать, что это было правильно? Но в остальном он выглядит так же, как пример кода диапазона дат . Я получил подсказку от кого-то еще о том, что проблема заключается в следующем:

Проблема заключается в компоненте Controller, в который заключены ваши средства выбора даты. Они используют обратный вызов onChange и не разрешают его для распространения дочернего компонента.

При чтении документации вы можете использовать только неконтролируемые компоненты внутри них, например, теги html, все, что требует от React непосредственного управления их состоянием, будет работать здесь.

Вам нужно будет проверить передачу данных, которые вам требуются, из элементов формы, таких как указатели даты, обратно в основную форму и составить то, что вам нужно отправить туда вручную. Вы можете передавать данные обратно из компонентов, используя обратные вызовы, React.context или другую глобальную систему управления состоянием, например, Redux. Лично я бы порекомендовал придерживаться обратных вызовов, хотя сложность приложения по-прежнему управляема, и смотреть на другие варианты только в том случае, если все становится действительно сложным.

Кто-нибудь может мне помочь (как а нуб!) понимаешь как это сделать, может быть на примере? Или есть какая-нибудь документация, которая может мне помочь?

Большое спасибо,

Kat ie

Answer 1

Следуя ответу Билла в комментариях к моему первоначальному вопросу, я изменил свой код, чтобы он выглядел следующим образом, и теперь он обновляет поле даты внутри контроллера! Спасибо, Билл. Билл также привел примеры того, как вы будете использовать контроллер с различными типами входов, поэтому, пожалуйста, поблагодарите его, если вы найдете это полезным.

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;

Я хотел отформатировать дату, и это полезный список реквизитов, которые вы можете передать в компонент выбора даты

Еще раз спасибо Билл - ваши примеры Фантазия c Помогите!