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