reactjs 无法获取页面“”

iqxoj9l9  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(111)

我将DesktopDatePickeruseForm沿着使用。

<Controller
  control={control}
  name="dob"
  render={({field}) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DesktopDatePicker<Dayjs.Dayjs>
      label="For desktop"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      onError={(err) => {
        console.group('onError');
        console.log(err);
        console.groupEnd();
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  </LocalizationProvider>
  )}
 />

在表单提交时,表单数据有dob为未定义。任何指针都是最好的。

jgzswidk

jgzswidk1#

您没有在desktopdatepicker中使用field,因此它不工作。请检查https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5,了解如何使用带有react hook形式的Mui组件。您可以通过两种方法解决此问题。

1)基本方法:直接使用field并移除valueonChange

<Controller
   control={control}
   name="dob"
   render={({field}) => (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
     <DesktopDatePicker
       {...field} 
       label="For desktop"
       onError={(err) => {
         console.group('onError');
         console.log(err);
         console.groupEnd();
       }}
       renderInput={(params) => <TextField {...params} />}
     />
   </LocalizationProvider>
 )}

/〉

2)高级方法:不直接使用field

const [popperState, setPopperState] = useState(false);

<Controller
  name="dob"
  control={control}
  render={({
    field: { onChange, value },
    fieldState: { error },
  }) => (
        <FormControl sx={{ custom css code here})}>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DesktopDatePicker
              onOpen={() => setPopperState(true)}
              onClose={() => setPopperState(false)}
              onChange={popperState ? (() => undefined) : onChange}
              onAccept={(newValue) => {
                popperState ? onChange(newValue) : undefined;
              }}
              value={value}
              // inputFormat="MM/dd/yyyy"
              // allowSameDateSelection
              // components={{
              //   OpenPickerIcon: CustomCalenderIcon,
              // }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={!!error}
                  helperText={error?.message || ' '}
                  variant="outlined"
                  sx={{
                    custom css style here
                  }}
                />
              )}
            />
          </LocalizationProvider>
        </FormControl>
      )}
    />

相关问题