我要评论需要实现效果如下
目前效果如下
思路 : 将下拉框选项的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 下拉框内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论