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新扩展函数setState与lazyLoad及hook介绍

    React新扩展函数setState与lazyLoad及hook介绍

    这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • React应用中使用Bootstrap的方法

    React应用中使用Bootstrap的方法

    本篇文章主要介绍了React应用中使用Bootstrap的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react mobx 基本用法示例小结

    react mobx 基本用法示例小结

    mobx是一个轻量级的状态管理器,所以很简单(单一全局数据使用class)类有get 数据方法,本文通过示例代码介绍react mobx 基本用法,感兴趣的朋友有一起看看
    2023-11-11
  • 详解react-navigation6.x路由库的基本使用

    详解react-navigation6.x路由库的基本使用

    最近两个项目都用到了React Navigation,所以就研究一下如何使用,本文主要介绍了react-navigation6.x路由库的基本使用,感兴趣的可以了解一下
    2021-11-11
  • 详解Redux的工作流程

    详解Redux的工作流程

    这篇文章主要介绍了Redux的工作流程,redux是一个专门用于做状态管理的JS库,它可以在react、angular、vue等项目中,但基本与react配合使用,需要的朋友可以参考下
    2022-08-08
  • React中useCallback 的基本使用和原理小结

    React中useCallback 的基本使用和原理小结

    React的useCallback Hook用于缓存函数定义,避免组件重渲染时重复创建函数实例,本文就来介绍一下React 中 useCallback 的基本使用和原理,感兴趣的可以了解一下
    2025-11-11
  • React生命周期方法之componentDidMount的使用

    React生命周期方法之componentDidMount的使用

    这篇文章主要介绍了React生命周期方法之componentDidMount的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • react组件从搭建脚手架到在npm发布的步骤实现

    react组件从搭建脚手架到在npm发布的步骤实现

    这篇文章主要介绍了react组件从搭建脚手架到在npm发布的步骤实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用React制作一个贪吃蛇游戏的代码详解

    使用React制作一个贪吃蛇游戏的代码详解

    Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态,开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度,本文给大家详细讲解了如何使用 React 制作一个贪吃蛇游戏,需要的朋友可以参考下
    2023-11-11
  • 详解React如何优雅地根据prop更新state值

    详解React如何优雅地根据prop更新state值

    这篇文章主要为大家详细介绍了React如何优雅地实现根据prop更新state值,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
    2023-11-11

最新评论