具有材质 UI 自动完成功能的反应最终形式

Question

我已经制作了这个组件

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

我的模拟电子邮件列表是这种类型的 --> const mockEmail = ['[e-mail]'， '[e-mail]']

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

Answer 1

我在 react-admin 上创建自定义自动完成组件(在木头下使用 react-final-form(时发现了相同类型的错误。

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

为了解决这个问题，我添加了一个自动完成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)}
...
/>
)
}