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,
dataSource}=
this.
props
const
txt=
e.
target.
value
const
data=[]
columns.
forEach((
item)
=>{
const
id=
item.
id;
if(
item &&
item.
type!==
"file"){
if(
e.
target.
value){
const
arr=[]
arr.
push(...
dataSource.
filter(
item
=>typeof
item[
id]===
"string" &&
item[
id].
includes(
txt)===
true))
//匹配到一行兩個條件，去重
for(
let
i=
0;
i<
arr.
length;
i++){
let
flag =
true;
for(
let
j=
0;
j<
data.
length;
j++){
if(
Object.
is(
arr[
i],
data[
j])===
true){
//判斷兩個對象是否相同
flag =
false;
}
};
if(
flag){
data.
push(
arr[
i]);
};
};
}
else{
if(
data.
includes(...
dataSource)===
false){
data.
push(...
dataSource)
}
}
item[
"render"]=
text
=>
<
Highlighter
highlightStyle=
{{
backgroundColor:
'#ffc069',
padding:
0 }
}
searchWords=
{[
this.
state.
searchText]
}
autoEscape
textToHighlight=
{
text?
text.
toString():
""
}
/>
}
})
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
>
