1. 程式人生 > 程式設計 >解決antd 下拉框 input [defaultValue] 的值的問題

解決antd 下拉框 input [defaultValue] 的值的問題

專案中有下拉框跟input需要回顯,所以用到defaultValue這個預設值,在後臺調介面調到defaultValue這個值給select設定,但是不好使 解決方法

解決antd 下拉框 input [defaultValue] 的值的問題

直接用value 先載入選中的條目再載入預設值 初始的時候選中調模是空所以就會載入預設值 這樣就解決了 但是在選擇下拉的時候 要給scoreFrom值

解決antd 下拉框 input [defaultValue] 的值的問題

補充知識:antd Form元件行並列顯示 Form表單屬性為inline時,表單元件寬度問題

formLayout 不起作用

Form標籤 layout屬性設定為'inline' 時 下拉元件寬度沒有自適應:

 // 方法1:用Row + Col 定義自己需要的寬度,把layout屬性設定為'horizontal',const formLayout = {
      labelCol: { span: 4 },wrapperCol: { span: 14 },}
 ---------------------------------------------------------    
 <Form layout="horizontal" {...formLayout }>
  <Row>
  <Col span={6}>
   <Form.Item label="xxx">
   <Select>
    ....
   </Select>
   </Form.Item>
  </Col>
  <Col span={6}>
   <Form.Item label="xxx">
    <Select>
    ....
    </Select>
   </Form.Item>
  </Col>
      </Row>
 </Form>
 
 //方法2 給 Form.Item 手動設定寬度
 <Form layout="inline" {...formLayout }>
   <Form.Item label="xxx" style={{width:'25%'}}> //百分比
   <Select>
    ....
   </Select>
   </Form.Item>
   <Form.Item label="xxx" style={{width:'200px'}}>// 固定寬度
    <Select>
    ....
    </Select>
   </Form.Item>
 </Form>

以上這篇解決antd 下拉框 input [defaultValue] 的值的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。