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后台管理系统-品类的增加、修改和查看的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。