React後台管理系統 品類選擇器二級聯動元件

1.頁面大致是這個樣子

2.頁面結構

col-md-10">

this.onfirstcategorychange(e)} classname="form-control cate-select">

value="">請選擇一級分類

就需要return,不加就不需要return

this.state.firstcategorylist.map(

(category, index) => value= key=>) }

classname="form-control cate-select">

value="">請選擇二級分類

key=>

) }

: null

}

3.定義state裡邊的資料

this.state =

監聽select選擇框，當一級品類和二級品類改變的時候, 更新state裡邊firstcategoryid和secondcategoryid的值

//一級品類改變事件

onfirstcategorychange(e),() => ) }

//二級品類改變事件

onsecondcategorychange(e),() => ) }

載入一級分類

//載入一級分類

loadfirstcategory());

}, errmsg => ); }

載入二級分類

//載入二級分類

// 載入二級分類

loadsecondcategory());

}, errmsg => ); }

4.把最新的firstcategoryid和secondcategoryid的值傳入父元件，更新父元件裡邊一級品類和二級品類

// 傳給父元件選中的結果

onpropscategorychange()

// 如果只有一級品類

else }

父元件使用categoryselector元件

form-group">

col-md-2 control-label">所屬分類

categoryid=

parentcategoryid=

oncategorychange= />

更新父元件state裡邊一級品類和二級品類的值

//品類改變事件

oncategorychange(categoryid,parentcategoryid)); }

更多專業前端知識，請上

【猿2048】www.mk2048.com

React後台管理系統 品類選擇器二級聯動元件

1.頁面大致是這個樣子 2.頁面結構 this.onfirstcategorychange e classname form control cate select value 請選擇一級分類 就需要return,不加就不需要return this.state.firstcategorylist.m...

React後台管理系統 品類選擇器二級聯動元件

1.頁面大致是這個樣子 2.頁面結構 col md 10 this.onfirstcategorychange e classname form control cate select value 請選擇一級分類 就需要return,不加就不需要return this.state.firstcate...

React後台管理系統 品類的增加 修改和檢視

1.頁面 2.品類列表展示 let listbody this.state.list.map category,index opear onclick 修改名稱 return 品類列表 page header right product category add classname btn btn ...