Définition de la valeur de DatePicker (de antd) dans react-hooks-form

Question

J'essaie de comprendre comment utiliser le DatePicker de antd avec react-hooks-form.

Actuellement, ma tentative est:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";
import { Input as InputField, Form, Button, DatePicker, Divider, Layout, Typography, Skeleton, Switch, Card, Icon, Avatar } from 'antd';
import Select from "react-select";


const { Content } = Layout 
const { Text, Paragraph } = Typography;
const { Meta } = Card;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;



  const Team = props => {
    const { register, handleSubmit, setValue, errors } = useForm();
    const [ dueDate, setDate ] = useState(new Date());
    const [indexes, setIndexes] = React.useState([]);
    const [counter, setCounter] = React.useState(0);
    const { action } = useStateMachine(updateAction);
    const onSubit = data => {
      action(data);
      props.history.Push("./ProposalBudget");
    };


    // const handleChange = dueDate => setDate(date);
    const handleChange = (e) => {
      setValue("dueDate", e.target.value);
    }


  const onSubmit = data => {
    console.log(data);
  };

  const addMilestone = () => {
    setIndexes(prevIndexes => [...prevIndexes, counter]);
    setCounter(prevCounter => prevCounter + 1);
  };

  const removeMilestone = index => () => {
    setIndexes(prevIndexes => [...prevIndexes.filter(item => item !== index)]);
  };

  const clearMilestones = () => {
    setIndexes([]);
  };

  useEffect(() => {
    register({ name: dueDate }); // custom register antd input
  }, [register]);

Remarque: j'ai également essayé le nom: {${fieldName}.dueDate - ça ne marche pas non plus.

  return (
    <div>
        <HeaderBranding />
        <Content
          style={{
            background: '#fff',
            padding: 24,
            margin: "auto",
            minHeight: 280,
            width: '70%'
          }}
        >
        <form onSubmit={handleSubmit(onSubit)}>

          {indexes.map(index => {
            const fieldName = `milestones[${index}]`;
            return (
              <fieldset name={fieldName} key={fieldName}>
                <label>
                  Title:
                  <input
                    type="text"
                    name={`${fieldName}.title`}
                    ref={register}
                  />
                </label>

                <label>
                  Description:
                  <textarea
                    rows={12}
                    name={`${fieldName}.description`}
                    ref={register}
                  />
                </label>
                <label>When do you expect to complete this milestone? <br />


                <DatePicker 
                  selected={ dueDate } 
                  // ref={register}
                  InputField name={`${fieldName}.dueDate`} 
                  onChange={handleChange(index)}

                  //onChange={ handleChange }
                   >
                  <input 
                  type="date" 
                  name={`${fieldName}.dueDate`} 
                  inputRef={register}
                />
                </DatePicker>

                </label>

                <Button type="danger" style={{ marginBottom: '20px', float: 'right'}} onClick={removeMilestone(index)}>
                  Remove this Milestone
                </Button>
              </fieldset>
            );
          })}

          <Button type="primary" style={{ marginBottom: '20px'}} onClick={addMilestone}>
            Add a Milestone
          </Button>
          <br />
          <Button type="button" style={{ marginBottom: '20px'}} onClick={clearMilestones}>
            Clear Milestones
          </Button>
          <input type="submit" value="next - budget" />
        </form>
       </Content>

      </div>  
  );
};

export default withRouter(Team);

Cela génère une erreur qui dit: TypeError: Impossible de lire la propriété "valeur" de non défini

setValue est défini dans handleChange.

Je ne sais pas exactement quelles étapes sont en suspens pour faire fonctionner ce sélecteur de date. Ai-je besoin d'une fonction de sélection distincte?

Quelqu'un a-t-il compris comment brancher ce lecteur de date?

J'ai aussi essayé:

const handleChange = (e) => {
      setValue("dueDate", e.target.Date);
    }

et j'ai essayé:

const handleChange = (e) => {
      setValue("dueDate", e.target.date);
    }

mais chacune de ces générations la même erreur

Answer 1

/* eslint-disable react/prop-types */
import React, { useState } from 'react';
import { DatePicker } from 'antd';
import { Controller } from 'react-hook-form';
import color from '../../assets/theme/color';

import DatePickerContainer from './DatePickerContainer';

function DatePickerAntd(props) {

  const { control, rules, required, title, ...childProps } = props;
  const { name } = childProps;

  const [focus, setFocus] = useState(false);

  const style = {
    backgroundColor: color.white,
    borderColor: color.primary,
    borderRadius: 5,
    marginBottom: '1vh',
    marginTop: '1vh',
  };

  let styleError;
  if (!focus && props.error) {
    styleError = { borderColor: color.red };
  }

  return (
    <div>
      <Controller
        as={
          <DatePicker
            style={{ ...style, ...styleError }}
            size="large"
            format="DD-MM-YYYY"
            placeholder={props.placeholder || ''}
            onBlur={() => {
              setFocus(false);
            }}
            onFocus={() => {
              setFocus(true);
            }}
            name={name}
          />
        }
        name={name}
        control={control}
        rules={rules}
        onChange={([selected]) =>  ({ value: selected })}

      />
    </div>
  );
}
export default DatePickerAntd;

mon parent de conteneur utilise le formulaire react-hooks

  const { handleSubmit, control, errors, reset, getValues } = useForm({
    mode: 'onChange',
    validationSchema: schema,
  });

            <DatePickerAntd
              name="deadline"
              title={messages.deadline}
              error={errors.deadline}
              control={control}
              required={isFieldRequired(schema, 'deadline')}
            />

comme ça, ça marche pour moi ;-)