react 下拉框内容回显的实现思路
作者：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 下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！