Question

我正在尝试将Material-UI Autocomplete用作react-hook-form和control动态完成自动填充的defaultValues的多个输入（在编辑数据时，基于已经保存了从数据库中提取的数据）。

所以主要问题是：

控制Material-UI Autocomplete组件中的默认值并将其与react-hook-form一起使用的最佳方法是什么？

我到目前为止所做的事情：

通过在react中使用函数和钩子，我包装了一个 React Hook表单的Controller中的自动完成组件可以控制状态。我试图从MUI的文档中实施解决方案和react-hook-form以及以下线程的解决方案。

I created a minimal Sandbox here

功能

当我在defaultValue中设置Controller时，它可以显示受控的默认值，但会引发错误：TypeError: Cannot read property 'filter' of undefined

  <Controller
      as={
      <Autocomplete
        multiple
        value={defaultValues}
        onChange={(e, values) => setValue("food", values)}
        ...
        renderInput={params => ( ... )}
      />
    }
    control={control}
    name="food"
    defaultValue={defaultValues} // <- this makes the error
  />

当我未在defaultValue中设置Controller时，它可以像期望的那样选择multiple值，但它不显示默认值，效果很好。 / p>

令人困惑的是，Autocomplete必须由value/onChange控制，而Controller也必须由defaultValue/setValue控制，看来它们在冲突中我的情况。

设置defaultValue={ [] }并使用 useEffect并仅使用 setValue("food", defaultOption);

So i created another Sandbox here
由于Bill的回答，我将代码重构为renderProp 像文档中建议的那样：

Yet another sandbox here

现在，它就像一个咒语一样工作，但是我不得不设置onChange的道具 Autocomplete像这样：

onChange={(e, values) => setValue("food", values)}

（而不是文档建议执行的操作：（使用传递的onChange）
）
onChange={e => props.onChange(e.something)}

它有效，但这是将Autocomplete与 react-hook-form？

将问题与以下主题进行比较：

与我要执行的其他线程的主要区别是设置defaultValues中的multiple Autocomplete。

Proper way to use react-hook-form Controller with Material-UI Autocomplete

MUI Autocomplete's 'defaultValue' not working when used with Controller of react-hook-form

Why is initial value not set in Material UI Autocomplete using react-hook-form?

react-hook-form文档中的建议解决方案：

https://react-hook-form.com/api/#Controller

还有Material UI文档中的代码：

https://material-ui.com/components/autocomplete/#multiple-values

Answer 1

我能够通过执行以下操作来实现此目的：

                                <Controller
                                    name='test'
                                    control={control}
                                    render={({onChange, ...props}) => (
                                        <AutoComplete
                                            {...props}
                                            data-testid='test-select'
                                            width={350}
                                            label='Auto Complete'
                                            onChange={onChange}
                                            options={eventTypes}
                                            getOptionLabel={(option) => option ? option.name : ''}
                                            renderOption={(option) => option.name }
                                            getOptionSelected={(option) => option.name}
                                            renderInput={(params) => (
                                                <TextField {...params} error={error} helperText={helperText} label={label} placeholder={label} />
                                            )}
                                            onChange={(e, data) => onChange(data)}
                                            {...props}
                                        />
                                    )}
                                />

Answer 2

但是，我还没有找到一种使用react-hook-form进行验证的方法

您可以尝试进行自定义验证（以防万一，如果您使用MUI的具有多个= {true}的自动完成功能）

SELECT title
FROM film
WHERE film_id IN ("highest revenue")

SELECT film_id
FROM inventory
WHERE inventory_id IN (
        SELECT inventory_id
        FROM rental
        GROUP BY inventory_id
        ORDER BY count(inventory_id) DESC
        ) limit(highest revenue);

MUI的自动完成AS MULTIPLE输入+ react-hook-form +控制默认值不起作用（TypeError：无法读取未定义的属性“ filter”）

2 个答案: