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 封装自定义组件的操作方法

    React 封装自定义组件的操作方法

    React中自定义组件的重要性在于它们提供了代码重用、降低耦合性、提升可维护性、更好的团队协作、灵活性和易于测试和调试等好处,从而提高了开发效率和质量,这篇文章主要介绍了React 封装自定义组件,需要的朋友可以参考下
    2023-12-12
  • Suspense对React的意义及作用解析

    Suspense对React的意义及作用解析

    这篇文章主要为大家介绍了Suspense对React的意义及作用解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • React Router6.x路由表封装的两种写法

    React Router6.x路由表封装的两种写法

    本文主要介绍了React Router6.x路由表封装的两种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 在React页面重新加载时保留数据的实现方法总结

    在React页面重新加载时保留数据的实现方法总结

    在React页面重新加载时保留数据,可以通过多种方法来实现,常见的方法包括使用浏览器的本地存储(Local Storage 或 Session Storage)、URL参数、以及服务器端存储等,本文给大家总结了一些具体实现方法,需要的朋友可以参考下
    2024-06-06
  • react-native使用leanclound消息推送的方法

    react-native使用leanclound消息推送的方法

    这篇文章主要介绍了react-native使用leanclound消息推送的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • react+antd树选择下拉框中增加搜索框

    react+antd树选择下拉框中增加搜索框

    这篇文章主要介绍了react+antd树选择下拉框中增加搜索框方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 一文带你了解React中的并发机制

    一文带你了解React中的并发机制

    React 18.2.0 引入了一系列并发机制的新特性,旨在帮助各位开发者更好地控制和优化应用程序的性能和用户体验,下面我们就来看看如何利用这些新特性构建更高效、更响应式的应用程序吧
    2024-03-03
  • 一百多行代码实现react拖拽hooks

    一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • React之echarts-for-react源码解读

    React之echarts-for-react源码解读

    这篇文章主要介绍了React之echarts-for-react源码解读,echarts-for-react的源码非常精简,本文将针对主要逻辑分析介绍,需要的朋友可以参考下
    2022-10-10
  • react router 4.0以上的路由应用详解

    react router 4.0以上的路由应用详解

    本篇文章主要介绍了react router 4.0以上的路由应用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论