reactjs - 是否可以将 react-datepicker 与反应钩子形式一起使用？

Question

是否可以将 react-datepicker 与反应钩子形式一起使用？我尝试了以下示例：

https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark

但没有运气。

import React, { useState } from "react";
import "./styles.css";
import { useForm } from "react-hook-form";
import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap";
import DatePicker from "react-datepicker";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [startDate, setStartDate] = useState();
  const [result, setResult] = useState();

  const onSearch = event => {
    setResult(event);
  };

  return (
    <div className="App">
      <Form onSubmit={handleSubmit(onSearch)}>
        <Row>
          <Col>
            <FormGroup>
              <Input
                type="number"
                name="account"
                id="account"
                placeholder="AccountId"
                innerRef={register({ required: true, maxLength: 20 })}
              />
            </FormGroup>
          </Col>
        </Row>

        <Row>
          <Col>
            <DatePicker
              innerRef={register}
              name="datetime"
              className={"form-control"}
              selected={startDate}
              onChange={date => setStartDate(date)}
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={15}
              timeCaption="time"
              dateFormat="MM-dd-yyyy h:mm"
            />
          </Col>
        </Row>

        <Button>Submit</Button>
      </Form>
      <div>{JSON.stringify(result)}</div>
    </div>
  );
}

Answer 1

请查看控制器文档：https ://react-hook-form.com/api/#Controller

我们正在维护一个代码框示例，用于托管大多数外部组件 UI 库的实现：https ://codesandbox.io/s/react-hook-form-controller-079xx

<Controller
  as={ReactDatePicker}
  control={control}
  valueName="selected" // DateSelect value's name is selected
  onChange={([selected]) => selected}
  name="ReactDatepicker"
  className="input"
  placeholderText="Select date"
/>

编辑

使用最新版本的 react-hook-form 这是使用渲染的控制器实现：

            <Controller
                name={name}
                control={control}
                render={({ onChange, value }) => (
                    <DatePicker
                        selected={value}
                        onChange={onChange}
                    />
                )}
            />

Answer 2

使用 react-hooks-form v7

导入依赖：

import { Controller, useForm } from 'react-hook-form'
import DatePicker from 'react-datepicker'

将控件添加到 useForm() 挂钩：

const { control, register, handleSubmit, ... } = useForm()

添加 Controller 和 DatePicker 组件：

 <Controller
    control={control}
    name='date-input'
    render={({ field }) => (
      <DatePicker
        placeholderText='Select date'
        onChange={(date) => field.onChange(date)}
        selected={field.value}
      />
   )}
  />

Answer 3

使用 React Material-UI

首先请注意您已使用 LocalizationProvider 包装了您的 App 组件。就我而言，它是时刻库。https://mui.com/components/date-picker/

这是可重用的 DatePickerAsController 组件:)

import React from 'react';
import { Controller } from 'react-hook-form';
import { TextField, TextFieldProps } from '@mui/material';
import clsx from 'clsx';
import { DatePicker } from '@mui/lab';
import { Moment } from 'moment';
    
export interface DatePickerAsControllerProps {
  control: any;
  name: string;
  value: Moment;
  rules?: any;
  classes?: string[];
  label: string;
  onChange: (date: Moment) => void;
}

export function DatePickerAsController(props: DatePickerAsControllerProps) {
  const { control, name, rules, classes, label, onChange, value } =
    props;

  const handleChange = (date: Moment, field: any) => {
    console.log(date);
    field.onChange(date);
    onChange(date);
  };

  return (
    <Controller
      control={control}
      name={name}
      rules={rules}
      render={({ field }) => (
        <DatePicker
          label={label}
          value={value}
          onChange={(date: Moment) => handleChange(date, field)}
          renderInput={(params: TextFieldProps) => (
            <TextField className={clsx(classes)} {...params} />
          )}
        />
      )}
    />
  );
}