带有材料 UI 自动完成功能的 React-final-form答案

【问题标题】：React-final-form with Materials UI autocomplete带有材料 UI 自动完成功能的 React-final-form
【发布时间】：2020-09-05 10:44:28
【问题描述】：

我已经制作了这个组件

const AutocompleteAdapter = ({ input, ...rest }) => (
  <Autocomplete
    {...input}
    {...rest}
    forcePopupIcon={false}
    renderInput={params => <TextField {...params} {...input} {...rest} />}
  />
);

并尝试将其呈现在

<Field
    required
    name="coach"
    label="Coach"
    type="text"
    placeholder="Enter Coach"
    helperText="coach's email"
    validate={composeValidators(required, email)}
    className={classes.field}
    options={mockEmails}
    getOptionLabel={option => option}
    component={AutocompleteAdapter}
 />

我的 mockEmails 列表属于这种类型 --> const mockEmails = ['name@gmail.com', 'name2@gmail.com']

列表在自动完成字段下呈现，但当我输入它时不会过滤结果，如果我选择列表中的一封邮件，我会收到此错误 Material-UI：getOptionLabel 的 useAutocomplete 方法无法正确处理选项。该组件需要一个字符串，但接收到的数字。对于输入选项：0，getOptionLabel 返回：0。

【问题讨论】：

标签： javascript reactjs debugging material-ui react-final-form

【解决方案1】：

我在 react-admin 上创建自定义自动完成组件的过程中遇到了相同类型的错误（它在木头下使用 react-final-form）。

每次我选择我的选项时，给 getOptionLabel 函数的值总是 0（所以给了我同样的错误）。

为了解决这个问题，我添加了一个 Autocomplete onChange 属性来使用 react-final-form input.onChange 属性 (https://final-form.org/docs/react-final-form/types/FieldRenderProps#inputonchange)

在您的情况下，它可能是这样的（未经测试）：

import (useField) from 'react-final-form'

const Field = (props) => {

    const {name, ...restProps} = props
    const {input, meta} = useField(name)

    return (
        <Field
            ...
            onChange={(event, option) => (input.onChange(option)}
            ...
        />
    )
}

【讨论】：