完整版项目的代码链接：
/lyandzao/note/tree/master/react/react-tuts/react-admin/src
mock 数据：
知乎 - 安全中心
wangEditor - 轻量级web富文本编辑器：
/huhuachuan/wangEditor
安装：
npm i wangeditor -S
教材的话，例子版本旧了，就不按老版本的案例走了，所以看着官方文档来写。
Edit.js：
import React, {Component } from 'react'import{Card,Button,Form,DatePicker,Input} from 'antd'import './edit.less'const formItemLayout = {labelCol: {span: 4},wrapperCol: {span: 16}}const config = {rules: [{type: 'object', required: true, message: 'Please select time!' }],}class Edit extends Component {// 提交表单handleSubmit = (e) => {// console.log(e)e.preventDefault()this.props.form.validateFields((err,values) => {if(!err){console.log('Received values of form: ', values)}})}render() {console.log(Form);return (<Cardtitle="编辑文章"bordered={false}extra={<Button>取消</Button>}><FormonSubmit={this.handleSubmit}{...formItemLayout}><Form.Itemname="note"label="标题："rules={[{required: true,message: "标题不能为空"}]}><Input /></Form.Item><Form.Itemname="note"label="作者："rules={[{required: true,message: "作者不能为空"}]}><Input /></Form.Item><Form.Itemname="note"label="阅读量："rules={[{required: true,message: "阅读量不能为空"}]}><Input placeholder="0" /></Form.Item><Form.Item name="date-picker" label="创建时间" {...config}><DatePicker showTime placeholder="选择时间" /></Form.Item><Form.Item name={['user', 'introduction']} label="Introduction"><Input.TextArea /></Form.Item><div ref={this.editoeRef}>这里是内容...</div><Button type="primary" htmlType="submit">保存修改</Button></Form></Card>)}}export default Edit
request 文件下的 index.js：
import axios from 'axios'import {message } from 'antd'const isDev = process.env.NODE_ENV === 'development'const service = axios.create({baseURL: isDev ? '/app/mock/176929' : ''})//请求拦截器service.interceptors.request.use((config) => {config.data = Object.assign({}, config.data, {// authToken: window.localStorage.getItem('authToken')authToken: 'itisatokenplaceholder'})return config})service.interceptors.response.use((resp) => {if (resp.data.code === 200) {return resp.data.data} else {// 全局处理错误message.error(resp.data.errMsg)}})// 获取文章列表export const getArticles = (offset = 0, limited = 10) => {return service.post('/api/v1/articleList', {offset,limited})}//通过id删除文章export const deleteArticleById = (id) => {return service.post(`/api/v1/articleDelete`,{id})}//通过id获取文章export const getArticleById = (id) => {return service.post(`/api/v1/article/${id}`)}
