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 下拉框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: