目錄結構
第乙個檔案是json資料
第二個檔案是入口
第三個檔案是實現主要功能
第四個檔案是樣式
insertfunction.jsx
第一種方法是:集合聯動
>
>
函式類別:<
/p>
size=
"small"
bordered=
"true"
itemlayout=
"horizontal"
datasource=
renderitem=
>
} title=
/>
<
/list.item>)}
/>
<
/p>
<
/col>
>
選擇函式:<
/p>
size=
"small"
bordered=
"true"
itemlayout=
"horizontal"
datasource=
renderitem=
>
} title=
/>
<
/list.item>)}
/>
<
/p>
<
/col>
<
/row>
<
/div>
>
<
/p>
>
<
/p>
<
/div>
<
/div>第二種方式是:select聯動
import react,
from 'react'
;import
from 'antd'
;import styles from './insertfunction.module.less'
;import datafunction from './datafunction'
;import functionparam from './functionparam'
;export default
class
insertfunction
extends
component
this
.gettype =
this
.gettype.
bind
(this);
this
.getfunction =
this
.getfunction.
bind
(this);
} functionparamcancel =()
=>);
};functionparamclick =()
=>);
};renderoptions1 =()
=>
value=
>
<
/option>);
};renderoptions2 =()
=>
value=
>
<
/option>);
};gettype
(e))}}
);}getfunction
(e))}}
);}render()
=this
.props;
return
(title=
"插入函式" width=
bodystyle=
} onok=
oncancel=
>
functionparamcancel=
curfunction=
curdescribe=
curparam=
/>
>
>
函式類別:
<
/p>
size=
"5" onclick=
>
<
/select>
<
/p>
<
/col>
>
選擇函式:
<
/p>
size=
"9" onclick=
>
<
/select>
<
/p>
<
/col>
<
/row>
<
/div>
>
<
/p>
>
<
/p>
<
/div>
<
/div>
<
/modal>);
}}datafunction.js
let datafunction =[,
,,,,
,,,,
,,]}
,,,,
,,,,
,,,,
,,,,
,,,,
,,,,
,]}]
export
default datafunction;
insertfunction.module.less
@fontsize
: 14px;
.tabsstyle
.liststyle
.listitem:active
.listitemstyle
index.js
import insertfunction from './insertfunction'
;export default insertfunction;
實現效果
下拉列表聯動效果
function function log success function obj 1,介面請求方式 post get 2,產品編號讀取資料修改 get傳參 通過生產線拉取對應產品編號 admin f kiln operating table get product number route f ...
React 列表渲染
第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...
react寫城市(省市區)聯動
在components中引入聯動的json檔案 import provincedata from json area.json 在this.state中定義相應變數 constructor props zoom 3 curoption 聯動省級市資料 deepprovince null,deepci...