react 下拉框内容回显的实现思路
更新时间:2024年05月21日 09:45:51 作者:huoyueyi
这篇文章主要介绍了react 下拉框内容回显,实现思路是通过将下拉框选项的value和label一起存储到state中, 初始化表单数据时将faqType对应的label查找出来并设置到Form.Item中,最后修改useEffect,需要的朋友可以参考下
需要实现效果如下
目前效果如下
思路 : 将下拉框选项的value和label一起存储到state中 , 初始化表单数据时 , 将faqType
对应的label查找出来并设置到Form.Item中 , 最后修改useEffect
旧代码
//可以拿到faqType为0 但是却没有回显出下拉框的内容 我需要faqType为0 回显出下拉框内容为对应的label <Form form={form2} initialValues={{ question: currentRecord.question || '', faqType: currentRecord.faqType || '', }} > <Form.Item label='问题类型' name='faqType' colon={false} rules={[{ required: true, message: '请输入问题类型' }]} > <Select onChange={value => { setSelectedCon1(value) form2.setFieldsValue({ faqType: value }) }} allowClear showSearch placeholder='请输入问题类型' style={{ width: 300, height: 40 }} options={[ { value: 0, label: '如何使用' }, { value: 1, label: '常见情况' }, { value: 2, label: '日常维护' }, { value: 3, label: '如何更换' } ]} /> </Form.Item> // 弹窗内部数据回显 useEffect(() => { if (currentRecord) { form2.setFieldsValue({ question: currentRecord.question || '', faultInformationId: currentRecord.faultInformationId || '', faqType: currentRecord.faqType || '', answer: currentRecord.answer || '' }) } }, [currentRecord, form2])
解决问题的代码
const [faqTypes, setFaqTypes] = useState([ { value: 0, label: '如何使用' }, { value: 1, label: '常见情况' }, { value: 2, label: '日常维护' }, { value: 3, label: '如何更换' } ]); <Form.Item label='问题类型' name='faqType' colon={false} rules={[{ required: true, message: '请输入问题类型' }]} > <Select onChange={value => { setSelectedCon1(value) form2.setFieldsValue({ faqType: value }) }} allowClear showSearch placeholder='请输入问题类型' style={{ width: 300, height: 40 }} options={faqTypes.map(type => ({ value: type.value, label: type.label }))} /> </Form.Item> useEffect(() => { if (currentRecord) { const selectedFaqType = faqTypes.find(type => type.value === currentRecord.faqType); form2.setFieldsValue({ question: currentRecord.question || '', faultInformationId: currentRecord.faultInformationId || '', faqType: selectedFaqType ? selectedFaqType.label : '', answer: currentRecord.answer || '' }) } }, [currentRecord, form2, faqTypes])
到此这篇关于react 下拉框内容回显的文章就介绍到这了,更多相关react 下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
基于React-Dropzone开发上传组件功能(实例演示)
这篇文章主要介绍了基于React-Dropzone开发上传组件,主要讲述的是在React-Flask框架上开发上传组件的技巧,需要的朋友可以参考下2021-08-08react-redux的connect与React.forwardRef结合ref失效的解决
这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
最新评论