reactjs - 是否可以将 react-datepicker 与 react 钩子(Hook)形式一起使用?

标签 reactjs react-datepicker react-hook-form

是否可以将 react-datepicker 与 react 钩子(Hook)形式一起使用?我尝试了以下示例:

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>
  );
}

最佳答案

请查看 Controller 文档: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 实现:
            <Controller
                name={name}
                control={control}
                render={({ onChange, value }) => (
                    <DatePicker
                        selected={value}
                        onChange={onChange}
                    />
                )}
            />

关于reactjs - 是否可以将 react-datepicker 与 react 钩子(Hook)形式一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60864610/

相关文章:

reactjs - 如何更改星期 react 日期选择器的格式?

reactjs - react-hook-form material-ui 下拉字段缺少 `name` 属性 :

javascript - React Hook Form - 智能组件 - 当输入被包装在元素中时表单被破坏

react-hook-form - useWatch 和 useForm 的 watch 有什么区别? [ react Hook 形式]

javascript - Facebook react : Invariant Violation and elements than didn't mount automatically

javascript - 更新到 React 16.2.0 时找不到模块 "react/lib/ReactComponentTreeHook"错误

reactjs - "Cannot read property ' offsetWidth ' of null"使用 Material UI 对话框时

javascript - React DatePicker 切换问题

javascript - 如何在日期选择器中设置最大日期?

javascript - React Hooks 动态输入