[英]React-final-form with Materials UI autocomplete
I have made this Component我已经制作了这个组件
const AutocompleteAdapter = ({ input, ...rest }) => (
<Autocomplete
{...input}
{...rest}
forcePopupIcon={false}
renderInput={params => <TextField {...params} {...input} {...rest} />}
/>
);
and trying to render it inside the并尝试将其呈现在
<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}
/>
My mockEmails list is of this type --> const mockEmails = ['name@gmail.com', 'name2@gmail.com']我的 mockEmails 列表属于这种类型 --> const mockEmails = ['name@gmail.com', 'name2@gmail.com']
The list is rendered under the autocomplete field but when im typing it dont filter the results, and if i choose one mail of the list i get this error
Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.
The component expect a string but received number.
For the input option: 0, `getOptionLabel` returns: 0.
I have encoutered the same type of error during the creation of a custom Autocomplete component on react-admin (which uses react-final-form under the wood).在 react-admin 上创建自定义自动完成组件时,我遇到了相同类型的错误(它在木头下使用 react-final-form)。
Everytime I selected my option, the value given to the getOptionLabel function was always 0 (And so gave me the same error).每次我选择我的选项时,给 getOptionLabel function 的值总是 0(所以给了我同样的错误)。
To fix this, I have added an Autocomplete onChange property to use the react-final-form input.onChange prop ( https://final-form.org/docs/react-final-form/types/FieldRenderProps#inputonchange )为了解决这个问题,我添加了一个 Autocomplete onChange 属性来使用 react-final-form input.onChange 道具( https://final-form.org/docs/react-final-form/types/FieldRenderProps#inputonchange )
In your case it could be something like this (not tested):在您的情况下,它可能是这样的(未经测试):
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)}
...
/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.