1.this問題對應寫法javascript
1)css
this.
handleChange =
this.
handleChange.
bind(
this)
//若是不寫這個，必需要用箭頭函數
handleChange(
e) {
this.
setState({
temperature:
e.
target.
value});
}
2)
handleChange=(
e)
=> {
this.
setState({
temperature:
e.
target.
value});
}
2.react沒有直接的獲取大量表單數據的方法，只能一個一個獲取，這時候要藉助一些第三方的插件，好比antd裏面的html
if(
item.
inputType===
"daterange"){
const
TIMEPICKER=
<
FormItem
label=
{
label
}
key=
{
field
}
>
{
getFieldDecorator(
field)(
<
RangePicker
locale=
{
locale
}
style=
{{
width:
225}
}
/>
)
}
</
FormItem
>
formItemList.
push(
TIMEPICKER)
}
最後一鍵獲取表單數據java
let
fieldsValue=
this.
props.
form.
getFieldsValue();
3.react的state的異步問題：在React庫控制以內時，它就會以異步的方式來執行，不然以同步的方式執行。react
也就是你setState的同時，輸入設置的state的每每沒法同步json
state
自己的設計是沒法直接更改，
setState
的設計是用來更動
state
值
4.數據存放問題 數組
當你純渲染一個組件的時候，你能夠接受父級傳過來的數據，this.props.data直接使用 antd
在判斷哪個是 state 時，簡單地對每一項數據提出三個問題：
1.是不是從父級經過 props 傳入的？若是是，可能不是 state 。
2.是否會隨着時間改變？若是不是，可能不是 state 。
3.能根據組件中其它 state 數據或者 props 計算出來嗎？若是是，就不是 state 。app
5.tabs頁切換，導航菜單跟着聯動 框架
在tabs的onChange函數中調用子組件NavLeft裏的方法，將activeKey傳過去，在從openKey的鍵值對中遍歷，找到相應的openKeys值，將openKeys傳到state中便可。
這時候，請注意，設置過 onOpenChange的裏面必需要setState（{openKeys}）,不然點擊菜單沒法打開；其次，openKeys是一個數組，而並非字符串
6.動態添加一行表格，裏面又是一些表單input問題
製做這個功能的時候，我確定首選UI的表單方法：
<
FormItem
>
{
getFieldDecorator(
'remember', {
valuePropName:
'checked',
initialValue:
true
})(
<
Checkbox
>記住密碼
</
Checkbox
>
)
}
<
span
>忘記密碼
</
span
>
<
Button
style=
{{
width:
'100%'}
}
type=
"primary"
onClick=
{this.
handleSubmit
}
>登陸
</
Button
>
</
FormItem
>
可是完成以後發現，新增後的表單沒法鍵入，目前還不知道什麼緣由
因此只能捨棄官網的方法，用循環將input塞進去
獲取數據的方法是，只要用戶鍵入數據，將數據暫存在本地，點提交，再將數據融合，一塊兒提交，暫時還沒想到其餘方法
--------------------------------------------------------------------------------
2019-7-24更新，
以前的作法容易在數據提交時出錯，如今改成添加一行，彈出一個表單，填寫以後，再將數據填充到頁面上，避免了動態添加表單沒法輸入的問題
7.tabs的路由問題
其實當初是想作那種點擊NavLeft的菜單，添加路由，自動增長tabs
可是呢，對於剛接觸react的新人來講，不知從何下手，看了不少博客，也沒法獲知有用的方法
因此，迫於無奈，最終的方案是 點擊菜單，獲取id值，手動添加tabs的panes，而後在根據panes裏面的title匹配相應的模板組件，是之加載數據，並無用到路由的相關技術，
但願之後能改寫這段代碼···
-----------------------------------------------------------------------------
2019-7-24更新，
react是SPA單頁面應用，框架自己就不太適合作複雜的tab頁面的動態數據切換，以後需求改成單頁面加載···
8.content頁下滑，tabs置頂問題
<
Col
span=
"20"
className=
"main"
onScroll=
{this.
handleScroll
}
>
將要滾動判斷的部分綁定handScroll函數
handleScroll=(
e)
=>{
let
scrollTop =
e.
target.
scrollTop;
//滾動條滾動高度
let
scrollHeight =
e.
target.
scrollHeight
let
obj =
document.
getElementsByClassName(
"ant-tabs-bar")[
0]
if(
scrollTop>
50 &&
scrollHeight>
705){
obj.
style.
position =
'fixed';
obj.
style.
top =
'0';
obj.
style.
background=
'#002140'
obj.
style.
width=
'100%'
}
else{
obj.
style.
position =
'static';
}
}
9.使用SuperAgent傳輸數據
附上乾糧：https://www.jianshu.com/p/98b854322260
封裝 SuperAgent方法，供後續使用，附上代碼
export
default
class
Superagent{
static
super(
options){
return
new
Promise((
resolve,
reject)
=>{
superagent
.
post(
options.
url)
.
type(
'form')
.
set(
"datamobile-token",
tokenName)
.
query(
options.
query||
'')
.
send(
options.
data||
'')
.
end((
req,
res)
=>{
if(
res.
status===
200){
resolve(
res.
body)
}
else
if(
res.
status===
200){
message.
info(
"請求權限不足,多是token已經超時")
}
else
if(
res.
status===
404||
res.
status===
504){
message.
info(
"頁面不存在。")
}
else
if(
res.
status===
500){
message.
info(
"後臺處理錯誤。")
}
else{
reject(
res.
body)
}
})
})
}
}
10. RightBar導航錨點實現
{
this.
state.
cardTitle?
this.
state.
cardTitle.
map((
item)
=>{
return
<
li
onClick=
{()
=>this.
scrollToAnchor(
item)
}
key=
{
item
}
>
{
item
}
</
li
>
}):
""
}
將導航綁點scrollToAnchor方法，之因此不用a標籤的錨點功能呢，緣由是使用a標籤，href中帶#號的，react會默認去實現路由跳轉
scrollToAnchor = (
anchorName)
=> {
if (
anchorName) {
let
anchorElement =
document.
getElementById(
anchorName);
if(
anchorElement) {
anchorElement.
scrollIntoView({
behavior:
'smooth'})}
}
}
scrollIntoView方法是H5新增方法，具體參數詳見傳送門：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
11.antd的Select,Cascader,Datepicker的下拉框隨着頁面的滾動而滾動
這個問題是官方默認相對於頁面body定位，只要改成相對於父級定位就能夠了
Select,Cascader使用
getPopupContainer=
{
trigger
=>
trigger.
parentNode
}
Datepicker使用
getCalendarContainer=
{
trigger
=>
trigger.
parentNode
}
12.antd upload限制文件類型和數量
const
props = {
accept:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-excel,application/vnd.ms-excel",
onChange
: ()
=> {
fileList.
slice(-
1);
//限制一個文件數量
},
onRemove
: (
file)
=> {
this.
setState((
state)
=> {
const
index =
state.
fileList.
indexOf(
file);
const
newFileList =
state.
fileList.
slice();
newFileList.
splice(
index,
1);
return {
fileList:
newFileList,
begin:
true,
percent:
0,
};
});
},
beforeUpload
: (
file)
=> {
this.
setState(
state
=> ({
fileList: [
file],
begin:
false
}));
return
false;
},
fileList,
};
經常使用文件類型：
後綴名
MIME名稱
*.3
gpp
audio/3
gpp,
video/3
gpp
*.
ac3
audio/
ac3
*.
asf
allpication/
vnd.
ms-
asf
*.
au
audio/
basic
*.
css
text/
css
*.
csv
text/
csv
*.
doc
application/
msword
*.
dot
application/
msword
*.
dtd
application/
xml-
dtd
*.
dwg
image/
vnd.
dwg
*.
dxf
image/
vnd.
dxf
*.
gif
image/
gif
*.
htm
text/
html
*.
html
text/
html
*.
jp2
image/
jp2
*.
jpe
image/
jpeg
*.
jpeg
image/
jpeg
*.
jpg
image/
jpeg
*.
js
text/
javascript,
application/
javascript
*.
json
application/
json
*.
mp2
audio/
mpeg,
video/
mpeg
*.
mp3
audio/
mpeg
*.
mp4
audio/
mp4,
video/
mp4
*.
mpeg
video/
mpeg
*.
mpg
video/
mpeg
*.
mpp
application/
vnd.
ms-
project
*.
ogg
application/
ogg,
audio/
ogg
*.
pdf
application/
pdf
*.
png
image/
png
*.
pot
application/
vnd.
ms-
powerpoint
*.
pps
application/
vnd.
ms-
powerpoint
*.
ppt
application/
vnd.
ms-
powerpoint
*.
rtf
application/
rtf,
text/
rtf
*.
svf
image/
vnd.
svf
*.
tif
image/
tiff
*.
tiff
image/
tiff
*.
txt
text/
plain
*.
wdb
application/
vnd.
ms-
works
*.
wps
application/
vnd.
ms-
works
*.
xhtml
application/
xhtml+
xml
*.
xlc
application/
vnd.
ms-
excel
*.
xlm
application/
vnd.
ms-
excel
*.
xls
application/
vnd.
ms-
excel
*.
xlt
application/
vnd.
ms-
excel
*.
xlw
application/
vnd.
ms-
excel
*.
xml
text/
xml,
application/
xml
*.
zip
aplication/
zip
*.
xlsx
application/
vnd.
openxmlformats-
officedocument.
spreadsheetml.
sheet