是否可以将react

本文介绍了是否可以将react-datepicker与react hooks表单一起使用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

Is it possible to use react-datepicker with react hooks forms? I tried following sample:

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

推荐答案

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

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

which we are maintaining a codesandbox example for hosting most the external components UI libs' implementations: 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" />