Question

是否可以将react-datepicker与react hooks表单一起使用？我尝试了以下示例：

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

但是没有运气。

icon: { url: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|0099cc|",
        size: new google.maps.Size(20, 32) // resize as you like
      }

Answer 1

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

我们正在维护一个codeandbox示例，用于托管大多数外部组件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实现：

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

Answer 2

使用 react-hooks-form v7

导入依赖：

-- Makefile
-- myfolder
---- bar.yaml
---- .config.yaml

向 useForm() 钩子添加控件：

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

添加控制器和日期选择器组件：

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

是否可以将react-datepicker与react hooks表单一起使用？

2 个答案: