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-Router如何进行页面权限管理的方法

    React-Router如何进行页面权限管理的方法

    本篇文章主要介绍了React-Router如何进行页面权限管理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 基于React-Dropzone开发上传组件功能(实例演示)

    基于React-Dropzone开发上传组件功能(实例演示)

    这篇文章主要介绍了基于React-Dropzone开发上传组件,主要讲述的是在React-Flask框架上开发上传组件的技巧,需要的朋友可以参考下
    2021-08-08
  • 无废话快速上手React路由开发

    无废话快速上手React路由开发

    本文以简洁为目标,帮助快速上手react-router-dom默认你接触过路由相关的开发,通过实例代码讲解的很详细,对React路由相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • React jsx文件介绍与使用方式

    React jsx文件介绍与使用方式

    这篇文章主要介绍了React jsx文件介绍与使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react中事件处理与柯里化的实现

    react中事件处理与柯里化的实现

    本文主要介绍了react中事件处理与柯里化的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • react-redux的connect与React.forwardRef结合ref失效的解决

    react-redux的connect与React.forwardRef结合ref失效的解决

    这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • React重新渲染超详细讲解

    React重新渲染超详细讲解

    什么是re-render(重新渲染)?哪些是必要的re-render?哪些是非必要的re-render?如果你对这些问题还不是很明白,那么可以在这篇文章中找到答案
    2022-11-11
  • React Fiber 链表操作及原理示例详解

    React Fiber 链表操作及原理示例详解

    这篇文章主要为大家介绍了React Fiber 链表操作原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React中异步数据更新不及时问题及解决

    React中异步数据更新不及时问题及解决

    这篇文章主要介绍了React中异步数据更新不及时问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    本文记录如何使用vscode打造一个现代化的react-native开发环境,旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法,感兴趣的朋友跟随小编一起看看吧
    2021-07-07

最新评论