javascript - 在 Material UI 中选择日期时出现“handleChange 不是函数”错误

Question

在组件中选择特定日期时，如上所述，由于“handleChange 不是函数”DatePicker而出现错误。组件被包裹在. 预计在输入时显示日期。怎么可能解决？请看下面的代码：DatePickerControllerreact-hook-formDatePicker

<form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name="date"
          render={({ handleDateChange, selectedDate, ref }) => (
            <>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <Grid container justify="space-around">
                  <DatePicker
                    ref={ref}
                    value={selectedDate}
                    onChange={handleDateChange}
                    format={`d  |  ` + `MMMM  |  ` + `yyyy`}
                    disablePast
                    animateYearScrolling
                    margin="normal"
                    style={{ cursor: "pointer" }}
                  />
                </Grid>
              </MuiPickersUtilsProvider>

              <br />
            </>
          )}
          rules={{
            required: "Date is required"
          }}
        />
      </form>

这是 CodeSandbox 链接：https ://codesandbox.io/s/jolly-currying-lwtrj

非常感谢任何建议或代码更改。

标签： javascriptreactjsmaterial-uireact-hook-form

Answer 1

首先，没有handleDateChangeor之类的属性selectedDate，也许这就是您的意思：

render={({ onChange: handleDateChange, value: selectedDate, ref }) => (

其次，您使用的是react-hook-formv7，render方法签名Controller已更改。请参阅此处的迁移指南。您需要从field属性中获取输入道具，而不是直接从渲染道具中获取：

render={({ field }) => {
  const {
    onChange: handleDateChange,
    value: selectedDate,
    ref
  } = field;

完整的工作代码：

<Controller
  control={control}
  name="date"
  render={({ field }) => {
    const {
      onChange: handleDateChange,
      value: selectedDate,
      ref
    } = field;
    return (
      <>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <Grid container justify="space-around">
            <DatePicker
              ref={ref}
              value={selectedDate}
              onChange={handleDateChange}
              format={`d  |  ` + `MMMM  |  ` + `yyyy`}
              disablePast
              animateYearScrolling
              margin="normal"
              style={{ cursor: "pointer" }}
            />
          </Grid>
        </MuiPickersUtilsProvider>

        <br />
      </>
    );
  }}
  rules={{
    required: "Date is required"
  }}
/>

现场演示