React實現列表聯動

2021-10-04 20:42:04 字數 3221 閱讀 3048

目錄結構

第乙個檔案是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...