Picker、useForm：picker与useform或controller之间的交易

Question

我有这个问题

我用了UseForm和Controller，做了一个小窗体，就是文件里的明窗体，但问题是我不知道如何让“picker”和Controller打交道

比如在width部分，我用了Controller和TextField，传了数据，用了Control，UseForm，但是当我放一个日历或者什么叫picker的时候，我就不知道怎么弄了controller 和 picker 之间的交易。

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import { Controller, useFormContext } from "react-hook-form";
import "date-fns";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from "@material-ui/pickers";

function ShippingTab(props) {
  const methods = useFormContext();
  const { control } = methods;

  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2022-04-16T11:44:40")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
  return (
    <div>
      <div className="flex -mx-4">
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
                
        <Controller
          name="width"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mt-8 mb-16 mx-4"
              label="Width"
              autoFocus
              id="width"
              variant="outlined"
              fullWidth
            />
          )}
        />

        <Controller
          name="depth"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mt-8 mb-16 mx-4"
              label="Depth"
              id="depth"
              variant="outlined"
              fullWidth
            />
          )}
        />
      </div>

      <Controller
        name="weight"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            className="mt-8 mb-16"
            label="Weight"
            id="weight"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <Controller
        name="extraShippingFee"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            className="mt-8 mb-16"
            label="Extra Shipping Fee"
            id="extraShippingFee"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">$</InputAdornment>
              ),
            }}
            fullWidth
          />
        )}
      />
    </div>
  );
}

export default ShippingTab;

Answer 1

react-hook-form 官方文档中有一个带有 ReactDateicker 的示例：https://react-hook-form.com/api/usecontroller/controller/

下面的方法行得通吗？

<Controller
    control={control}
    name="ReactDatepicker"
    render={() => (
    <KeyboardDatePicker
      margin="normal"
      id="date-picker-dialog"
      label="Date picker dialog"
      format="MM/dd/yyyy"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        "aria-label": "change date",
      }}
    />
    )}
/>

Picker、useForm：picker与useform或controller之间的交易

Picker, useForm: Dealing between the picker and the useform or controller

reactjs

material-ui