生活随笔
收集整理的這篇文章主要介紹了
React后台管理系统-品类的增加、修改和查看
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.頁面
?
2.品類列表展示
let listBody = this.state.list.map((category, index) => { ????????????return ( ????????????????<tr key={index}> ????????????????????<td>{category.id}</td> ????????????????????<td>{category.name}</td> ????????????????????<td> ????????????????????????<a className="opear" ????????????????????????????onClick={(e) => this.onUpdateName(category.id, category.name)}>修改名稱</a> ????????????????????????{ ????????????????????????????category.parentId === 0 ????????????????????????????? <Link to={`/product-category/index/${category.id}`}>查看子品類</Link> ????????????????????????????: null ????????????????????????} ????????????????????</td> ????????????????</tr> ????????????); ????????}); ????????return ( ????????????<div id="page-wrapper"> ????????????????<PageTitle title="品類列表"> ????????????????????<div className="page-header-right"> ????????????????????????<Link to="/product-category/add" className="btn btn-primary"> ????????????????????????????<i className="fa fa-plus"></i> ????????????????????????????<span>添加品類</span> ????????????????????????</Link> ????????????????????</div> ????????????????</PageTitle> ????????????????<div className="row"> ????????????????????<div className="col-md-12"> ????????????????????????<p>父品類ID: {this.state.parentCategoryId}</p> ????????????????????</div> ????????????????</div> ????????????????<TableList tableHeads={['品類ID', '品類名稱', '操作']}> ????????????????????{listBody} ????????????????</TableList> ????????????</div> ????????); ????}
?
3.加載品類列表
// 加載品類列表 ????loadCategoryList(){ ???????_product.getCategoryList(this.state.parentCategoryId).then(res => { ???????????this.setState({ ???????????????list : res ???????????}); ???????}, errMsg => { ???????????this.setState({ ???????????????list : [] ???????????}); ???????????_mm.errorTips(errMsg); ???????}); ???}
?
4.修改品類名稱
// 更新品類的名字 ????onUpdateName(categoryId, categoryName){ ???????let newName = window.prompt('請輸入新的品類名稱', categoryName); ???????if(newName){ ???????????_product.updateCategoryName({ ???????????????categoryId: categoryId, ???????????????categoryName : newName ???????????}).then(res => { ???????????????_mm.successTips(res); ???????????????this.loadCategoryList(); ???????????}, errMsg => { ???????????????_mm.errorTips(errMsg); ???????????}); ???????} ???}
?
5.添加品類
import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-service.jsx' import PageTitle from 'component/page-title/index.jsx'; const _mm = new MUtil(); const _product = new Product(); class CategoryAdd extends React.Component{ ????constructor(props){ ????????super(props); ????????this.state = { ????????????categoryList : [], ????????????parentId : 0, ????????????categoryName : '' ????????}; ????} ????componentDidMount(){ ????????this.loadCategoryList(); ????} ????// 加載品類列表,顯示父品類列表 ????loadCategoryList(){ ????????_product.getCategoryList().then(res => { ????????????this.setState({ ????????????????categoryList : res ????????????}); ????????}, errMsg => { ????????????_mm.errorTips(errMsg); ????????}); ????} ????// 表單的值發生變化 ????onValueChange(e){ ????????let name = e.target.name, ????????????value = e.target.value; ????????this.setState({ ????????????[name] : value ????????}); ????} ????// 提交 ????onSubmit(e){ ????????let categoryName = this.state.categoryName.trim(); ????????// 品類名稱不為空，提交數據 ????????if(categoryName){ ????????????_product.saveCategory({ ????????????????parentId : this.state.parentId, ????????????????categoryName : categoryName ????????????}).then((res) => { ????????????????_mm.successTips(res); ????????????????this.props.history.push('/product-category/index'); ????????????}, (errMsg) => { ????????????????_mm.errorTips(errMsg); ????????????}); ????????} ????????// 否則，提示錯誤 ????????else{ ????????????_mm.errorTips('請輸入品類名稱'); ????????} ????} ????render(){ ????????return ( ????????????<div id="page-wrapper"> ????????????????<PageTitle title="品類列表"/> ????????????????<div className="row"> ????????????????????<div className="col-md-12"> ????????????????????????<div className="form-horizontal"> ????????????????????????????<div className="form-group"> ????????????????????????????????<label className="col-md-2 control-label">所屬品類</label> ????????????????????????????????<div className="col-md-5"> ????????????????????????????????????<select name="parentId" ????????????????????????????????????????className="form-control" ????????????????????????????????????????onChange={(e) => this.onValueChange(e)}> ????????????????????????????????????????<option value="0">根品類/</option> ????????????????????????????????????????{ ????????????????????????????????????????????this.state.categoryList.map((category, index) => { ????????????????????????????????????????????????return <option value={category.id} key={index}>根品類/{category.name}</option> ????????????????????????????????????????????}) ????????????????????????????????????????} ????????????????????????????????????</select> ????????????????????????????????</div> ????????????????????????????</div> ????????????????????????????<div className="form-group"> ????????????????????????????????<label className="col-md-2 control-label">品類名稱</label> ????????????????????????????????<div className="col-md-5"> ????????????????????????????????????<input type="text" className="form-control" ????????????????????????????????????????placeholder="請輸入品類名稱" ????????????????????????????????????????name="categoryName" ????????????????????????????????????????value={this.state.name} ????????????????????????????????????????onChange={(e) => this.onValueChange(e)}/> ????????????????????????????????</div> ????????????????????????????</div> ????????????????????????????<div className="form-group"> ????????????????????????????????<div className="col-md-offset-2 col-md-10"> ????????????????????????????????????<button type="submit" className="btn btn-primary" ????????????????????????????????????????onClick={(e) => {this.onSubmit(e)}}>提交</button> ????????????????????????????????</div> ????????????????????????????</div> ????????????????????????</div> ????????????????????</div> ????????????????</div> ????????????</div> ????????); ????} } export default CategoryAdd;
更多專業前端知識，請上
【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的React后台管理系统-品类的增加、修改和查看的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
