咱們一塊兒踩過的坑----react（antd）（二）

1.antd Upload默認值問題

需求是這樣的，後臺若沒有圖片默認值，則只有上傳按鈕，且只能上傳一張圖片；如有默認值，則顯示默認頭像圖片， 可刪除，刪除以後有且只能添加一張圖片，沒有刪除默認圖片時不能添加圖片

坑爹之路漫漫-----

 

圖爲無默認值時狀態

圖爲有默認值狀態，刪除後可添加圖片

首先設置defaultFileList,可是defaultFileList並不會默認添加到fileList裏面

< Upload

accept= "image/*"

listType= 'picture'

beforeUpload= {this. beforeUpload }

defaultFileList= { fieldValue?[{

uid: "-1",

status: 'done',

url: `/file-server/ ${ fieldValue } `,

}]: "" }

onChange= {this. handleChange }

>

{

this. state. fileList. length>= 1? "": < Button style= {{ width: this. props. width} } >

< Icon type= "upload" /> 點擊上傳

</ Button >

}

</ Upload >

 2.antd表格篩選問題

antd官網上 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel

只有單列表格篩選的栗子，並無所有表格篩選功能，坑爹啊~

需求以下：在右上角搜索，全部列搜索

首先是佈局，由於我用了<Card>，因此用了extra屬性，添加了一個input框，

< Card

title= { cardTitle }

id= { cardTitle }

className= "hoverable"

headStyle= {{ background: "#f2f4f5"} }

extra= {this. props. type=== "detail"? < Input placeholder= "關鍵字搜索"

onChange= {this. searchValue }

addonBefore= { < Icon type= "search" /> }

/>: "" }

>

</ Card >

在引入react-highligt-words插件

import Highlighter from 'react-highlight-words';

還要去除封面和序號的干擾，直接上代碼，寫的很差

searchValue=( e) =>{

const columns= this. props. columns

const dataSource= this. props. dataSource

const txt= e. target. value

const data=[]

columns. map(( item) =>{

const fieldName= item. fieldName;

if( fieldName && fieldName. indexOf( "封面")===- 1){

if( e. target. value){

data. push(... dataSource. filter( item => item[ fieldName]. indexOf( txt)>- 1))

} else{

if( data. indexOf(... dataSource)===- 1){

data. push(... dataSource)

}

}

item[ "render"]=( text) => ( < Highlighter

highlightStyle= {{ backgroundColor: '#ffc069', padding: 0 } }

searchWords= {[ this. state. searchText] }

autoEscape

textToHighlight= { text. toString() }

/>)

}

return false

})

this. setState({

searchText:e. target. value,

dataSource:data

})

}

若是input框有數據輸入，用filter篩選，push進data，再將data賦給頁面渲染

若是input爲空，即不用篩選，將全部數據都顯示出來 ，最後實現效果如圖：

 

 

3.antd模態框組件更新問題

不知道你們有沒有遇到過這種狀況，第一次加載模態框，數據很好的顯示出來了，第二次再點擊別的模態框的時候，呈現的仍是第一次加載的數據，這是爲何呢？？？

以後各類去翻數據，傳的是否有問題，可是顯示數據沒問題，後來在 componentDidMount中加入輸出，監測到模態框只在第一次加載的時候更新數據，第二次加載實際上是沒有加載的，究其緣由，實際上是由於你點擊關閉模態框的時候，只是隱藏了模態框，並無銷燬組件····坑

解決方法：在modal中加入destoryOnClose,問題迎刃而解啦，哈哈哈哈哈

< Modal

title= {this. props. title }

visible= {this. props. visibleForm }

onOk= {this. handleOk }

onCancel= {this. props. handleCancel }

okText= "確認"

cancelText= "取消"

destroyOnClose

>