,可以通过以下步骤解决:
import React from 'react';
import { Formik, Field, ErrorMessage } from 'formik';
import Autocomplete from 'react-autocomplete';
<Formik
initialValues={{ autocompleteValue: '' }}
validate={values => {
const errors = {};
if (!values.autocompleteValue) {
errors.autocompleteValue = '必填字段';
}
return errors;
}}
onSubmit={values => {
// 处理表单提交逻辑
}}
>
<Field name="autocompleteValue">
{({ field }) => (
<Autocomplete
getItemValue={item => item.label}
items={[
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
]}
renderItem={(item, isHighlighted) => (
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
)}
value={field.value}
onChange={value => field.onChange({ target: { value, name: field.name } })}
onSelect={value => field.onChange({ target: { value, name: field.name } })}
/>
)}
</Field>
<ErrorMessage name="autocompleteValue" component="div" className="error" />
在上述代码中,我们使用Field组件将Autocomplete组件包装起来,并将其与Formik的表单状态进行绑定。通过定义getItemValue、items和renderItem属性,我们可以配置Autocomplete组件的选项列表和渲染方式。
<button type="submit">提交</button>
这样,当用户选择一个选项或未选择任何选项时,表单将进行验证。如果未选择选项,则会显示错误消息。如果选择了选项,则可以在onSubmit回调中处理表单提交的逻辑。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供了高性能、可靠稳定的计算能力。您可以根据业务需求自由选择配置,快速创建和部署云服务器实例。腾讯云云服务器支持多种操作系统,提供了丰富的网络和存储选项,适用于各种应用场景。
产品介绍链接地址:腾讯云云服务器(CVM)
企业创新在线学堂
企业创新在线学堂
Tencent Serverless Hours 第13期
腾讯云存储专题直播
企业创新在线学堂
云+社区沙龙online [技术应变力]
云+社区沙龙online
云+社区沙龙online [云原生技术实践]
领取专属 10元无门槛券
手把手带您无忧上云