是否可以将 react-datepicker 与 react hooks 形式一起使用?
Is it possible to use react-datepicker with react hooks forms?
是否可以将 react-datepicker 与 react hooks 表单一起使用?我尝试了以下示例:
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>
);
}
请查看控制器文档:https://react-hook-form.com/api/#Controller
我们正在维护一个用于托管大多数外部组件的 codesandbox 示例 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}
/>
)}
/>
使用 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}
/>
)}
/>
与反应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} />
)}
/>
)}
/>
);
}
是否可以将 react-datepicker 与 react hooks 表单一起使用?我尝试了以下示例:
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>
);
}
请查看控制器文档:https://react-hook-form.com/api/#Controller
我们正在维护一个用于托管大多数外部组件的 codesandbox 示例 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}
/>
)}
/>
使用 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}
/>
)}
/>
与反应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} />
)}
/>
)}
/>
);
}