需要实现效果如下
![](https://img-blog.csdnimg.cn/direct/503c352d144d4b28b7e831bd50304686.gif)
目前效果如下
![](https://img-blog.csdnimg.cn/direct/4ae9de5565a6468480c340b918688ddc.gif)
思路 : 将下拉框选项的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])