快捷導(dǎo)航

react 下拉框內(nèi)容回顯的實(shí)現(xiàn)思路

更新時(shí)間：2024年05月21日 09:45:51 作者：huoyueyi

這篇文章主要介紹了react 下拉框內(nèi)容回顯,實(shí)現(xiàn)思路是通過將下拉框選項(xiàng)的value和label一起存儲(chǔ)到state中, 初始化表單數(shù)據(jù)時(shí)將faqType對(duì)應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下

需要實(shí)現(xiàn)效果如下

目前效果如下

思路 : 將下拉框選項(xiàng)的value和label一起存儲(chǔ)到state中 , 初始化表單數(shù)據(jù)時(shí) , 將faqType對(duì)應(yīng)的label查找出來并設(shè)置到Form.Item中 , 最后修改useEffect

舊代碼

//可以拿到faqType為0 但是卻沒有回顯出下拉框的內(nèi)容 我需要faqType為0 回顯出下拉框內(nèi)容為對(duì)應(yīng)的label 
  <Form
          form={form2}
          initialValues={{
            question: currentRecord.question || '',
            faqType: currentRecord.faqType || '',
          }}
        >   
            <Form.Item
                  label='問題類型'
                  name='faqType'
                  colon={false}
                  rules={[{ required: true, message: '請(qǐng)輸入問題類型' }]}
                >
                  <Select
                    onChange={value => {
                      setSelectedCon1(value)
                      form2.setFieldsValue({ faqType: value })
                    }}
                    allowClear
                    showSearch
                    placeholder='請(qǐng)輸入問題類型'
                    style={{ width: 300, height: 40 }}
                    options={[
                      { value: 0, label: '如何使用' },
                      { value: 1, label: '常見情況' },
                      { value: 2, label: '日常維護(hù)' },
                      { value: 3, label: '如何更換' }
                    ]}
                  />
                </Form.Item>
// 彈窗內(nèi)部數(shù)據(jù)回顯
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: '日常維護(hù)' },
  { value: 3, label: '如何更換' }
]);
<Form.Item
  label='問題類型'
  name='faqType'
  colon={false}
  rules={[{ required: true, message: '請(qǐng)輸入問題類型' }]}
>
  <Select
    onChange={value => {
      setSelectedCon1(value)
      form2.setFieldsValue({ faqType: value })
    }}
    allowClear
    showSearch
    placeholder='請(qǐng)輸入問題類型'
    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])

到此這篇關(guān)于react 下拉框內(nèi)容回顯的文章就介紹到這了,更多相關(guān)react 下拉框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: