mui 使用 react-hook-form 自动完成：formData 中的 defaultValue

Question

我正在设置 Autocomplete 组件的 defaultValue 如下：

<Controller
  control={control}
  name={name}
  render={({field: {onChange, value}}) => (
    <Autocomplete
      freeSolo={freeSolo}
      options={options}
      renderInput={params => {
        return <TextField {...params} label={label} margin="normal" variant="outlined" onChange={onChange} />
      }}
      onChange={(event, values, reason) => onChange(values)}
      defaultValue={defaultValue}
    />
  )}
/>

根据默认值很好地显示该值。 但是，当我单击提交按钮时，如果我不使用自动完成组件，则自动完成字段的值始终未定义。 以下是我如何注册钩子和组件（简化代码）

const customerSchema = yup.object().shape({
  route: yup.string().nullable()
})
  
const {control, handleSubmit} = useForm({
    resolver: yupResolver(customerSchema)
  })

  const onSubmit = formData => {
    console.log(formData) // autocomplete is undefined if no action on the autocomplete 
  }

<form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
 <AutoCompleteInput
        control={control}
        name="route"
        label="route"
        options={customers_routes.map(option => option.route_name)}
        defaultValue={customer.route}
        freeSolo={false}
      />
  <Button type="submit">
        Update
      </Button>
  </form>

当我点击提交时，我应该怎么做才能让表单数据中的路由字段始终可用？

Answer 1

为什么不将defaultValues 选项与useForm 一起使用：

const {control, handleSubmit} = useForm({
  resolver: yupResolver(customerSchema),
  defaultValues: { route: customer.route },
});

您可以使用value prop，而不是将defaultValue prop 发送到AutoComplete，如下所示：

<Controller
  control={control}
  name={name}
  render={({ field: { onChange, value } }) => (
      <Autocomplete
        freeSolo={freeSolo}
        options={options}
        renderInput={(params) => {
          return (
            <TextField
              {...params}
              label={label}
              margin="normal"
              variant="outlined"
              onChange={onChange}
            />
          );
        }}
        onChange={(event, values, reason) => onChange(values)}
        value={value}
      />
  )}
/>