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

Question

我将 Autocopmlete 组件的默认值设置如下：

<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}
    />
  )}
/>

在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 },
});

而不是发送 defaultValue prop 到 AutoComplete 你可以使用 value prop，像这样：

<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}
      />
  )}
/>

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

mui autocomplete with react-hook-form: defaultValue in formData

reactjs

material-ui

next.js

react-hook-form