页面编写

antd表单的使用

要使用antd，先下载antd

  1. cnpm install antd --save

首先看一个表单的例子，在src下新建一个test文件夹，新建TextAntdForm.jsx，内容如下(先不管看得懂看不懂，后面解释)

  1. import React from 'react'
  2. import {Form, Input, Button} from 'antd'
  4. function TextAntdForm(props) {
  6.     const {getFieldDecorator, validateFields} = props.form
  8.     const handleSubmit = (event) => {
  9.         event.preventDefault();
  10.         validateFields((error, values) => {
  11.             if (!error) {
  12.                 console.log(values);
  13.             }
  14.         })
  15.     }
  17.     return(
  18.         <div style={{width: "300px", margin: "100px auto", fontFamily: "Consolas, '楷体'"}}>
  19.             <Form onSubmit={handleSubmit}>
  20.                 <Form.Item label="用户名">
  21.                     {getFieldDecorator('title', {
  22.                       rules: [{
  23.                         required: true,
  24.                         message: '请输入用户名',
  25.                       }],
  26.                     })(
  27.                       <Input size="large" placeholder="请输入用户名"/>
  28.                     )}
  29.                 </Form.Item>
  30.                 <Form.Item label="密码">
  31.                     {getFieldDecorator('password', {
  32.                       rules: [{
  33.                         required: true,
  34.                         message: '请输入密码',
  35.                       }],
  36.                     })(
  37.                       <Input.Password size="large" placeholder="请输入密码"/>
  38.                     )}
  39.                 </Form.Item>
  41.                 <Form.Item>
  42.                     <Button size="large" type="primary" htmlType="submit">提交</Button>
  43.                 </Form.Item>
  44.             </Form>
  45.         </div>
  46.     )
  47. }
  49. export default Form.create()(TextAntdForm)

修改src/index.js渲染该组件(记得引入antd/dits/antd.css，否则antd组件没有样式)

  1. import React from 'react'
  2. import ReactDOM from 'react-dom';
  4. // import router from './router'
  5. import TestAntdForm from './test/TestAntdForm'
  6. import 'antd/dist/antd.css'
  7. import './common.css';
  9. // ReactDOM.render(router(), document.getElementById("root"));
  10. ReactDOM.render(<TestAntdForm />, document.getElementById("root"));

页面编写 - 图1
现在来解释上面的代码，首先看最后一行

  1. Form.create()(TextAntdForm)

还记得高阶组件吗，Form.create()就是一个高阶组件，他会向组件的props中注入form，form提供了一些API，这里使用了两个：

  • getFieldDecorator：用于和表单进行双向绑定
  1. getFieldDecorator('title', {
  2.   rules: [{
  3.     required: true,
  4.     message: '请输入用户名',
  5.   }],
  6. })(
  7.   <Input size="large" placeholder="请输入用户名"/>
  8. )

上面将Input与表单项进行了绑定，getFieldDecorator接收两个参数，第一个参数是id，根据它可以获取输入控件的值或者设置输入控件的值，是必填项；第二个参数是options，里面可以有很多属性，这里使用了rules，定义了校验的规则，required表示是否必填，message表示未填时显示的消息文字。

  • validateFields：校验

里面接受一个回调函数，回调函数接收两个参数，第一个参数为error，当不满足校验规则时error的值非空，第二个参数是values，会将绑定表单的值以对象的形式传给values，键就是在getFieldDecorator传入的id。

上面在提交表单后，会调用Form的onSubmit回调函数，在回调函数，我们对数据进行了校验，如果没有问题的话，我们可以将输入表单的键值对以对象的形式获取到values，并打印出来
页面编写 - 图2

页面数据

我们将数据设置为一个数组datas，它的格式如下

  1. datas = [
  2.   {title: , brief: , isTop: , content: }
  3.   {title: , brief: , isTop: , content: }
  4. ]

Home组件根据datas展示数据，Edit和Display组件根据id和datas获取要展示的数据，由于多个组件都要用到数据，所以这里使用useContext和useReducer来分发数据。

在src下新建Provider.jsx，用来提供state和dispatch，内容如下

  1. import React, {useReducer} from 'react'
  3. export const Context = React.createContext();
  5. const reducer = (state, action) => {
  6.     const tempDatas = state.datas
  7.     // 按道理case后面跟的都是常量，我这里为了简单
  8.     switch(action.type) {
  9.         case 'insertData':
  10.             tempDatas[tempDatas.length] = action.data;
  11.             return {...state, datas: tempDatas}
  12.         case 'updateData':
  13.             tempDatas[action.id] = action.data
  14.             return {...state, datas: tempDatas}
  15.         case 'deleteData':
  16.             tempDatas.splice(action.id, 1)
  17.             return {...state, datas: tempDatas}
  18.         case 'changeOperation':
  19.             return {...state, operation: action.operation}
  20.         default:
  21.             return state
  22.     }
  23. }
  25. const initState = {
  26.     // 随便写的数据用来实验 随后会删掉
  27.     datas: [{title: 'aaa', isTop: true, brief: 'hahah'}, content: '<p>123</p>'],
  28.     // 用来判断是添加文章还是编辑文章
  29.     operation: 'ADD'
  30. }
  32. function Provider(props) {
  33.     const [state, dispatch] = useReducer(reducer, initState)
  34.     const {children} = props
  36.     return (
  37.         <Context.Provider value={{state, dispatch}}>
  38.             {children}
  39.         </Context.Provider>
  40.     )
  41. }
  43. export default Provider

更改router.js，在最上面加上Provider

  1. import Provider from './Provider'
  2. // 上面没有变化，除了import Provider，故此省略
  3. const router = () => {
  4.     return (
  5.         <Provider>
  6.             <Router history={history}>
  7.                 <Switch>
  8.                     {routes.map((item, id) => {
  9.                         return RouteItem({ key: id, ...item, history: history })
  10.                     })}
  11.                 </Switch>
  12.             </Router>
  13.         </Provider>
  14.     );
  15. };
  17. export default router

Home

观察Home页面
页面编写 - 图3
发现Home是由这一个个Item组成，Item中的数据正是datas数组中每一个元素的内容，在Home中新建文件夹Item，并在Item中新建index.jsx和index.module.css。index.jsx:

  1. import React from 'react'
  2. import styles from './index.module.css'
  3. import {Modal} from 'antd'
  5. const {confirm}  = Modal
  7. function Item(props) {
  9.     const { 
  10.         data, 
  11.         login, 
  12.         handleDelete, 
  13.         index, 
  14.         handleToEdit, 
  15.         handleToDisplay 
  16.     } = props;
  18.     const toDisplay = (event) => {
  19.         event.preventDefault();
  20.         handleToDisplay(index)
  21.     }
  23.     const toEdit = (event) => {
  24.         event.preventDefault();
  25.         handleToEdit(index)
  26.     }
  28.     const toDelete = (event) => {
  29.         event.preventDefault();
  30.         confirm({
  31.             title: `你确定要删除${data.title}`,
  32.             content: '删除后内容不可恢复',
  33.             onOk() {
  34.                 handleDelete(index)
  35.             },
  36.             onCancel() {
  38.             },
  39.         }); 
  40.     }
  42.     return (
  43.         <div className={styles.item}>
  44.             <h2><a href={`/display/${data.id}`} onClick={toDisplay}>{data.title}</a></h2>
  45.             <hr />
  46.             <div className={styles.abstract}>
  47.                 {data.brief}
  48.             </div>
  49.             <div className={styles.readmore}>
  50.                 <a href={`/display/${data.id}`} onClick={toDisplay}>阅读更多</a>
  51.             </div>
  52.             {/* 当登录失显示编辑本文和删除本文 */}
  53.             {login ? 
  54.             <div className={styles.edit}>
  55.                 <a href={`/edit/${data.id}`} onClick={toEdit}>编辑本文</a>
  56.             </div> : ""} 
  57.             {login ? 
  58.                 <div className={styles.delete}>
  59.                     <a href="/delete" onClick={toDelete}>删除本文</a>
  60.                 </div>: ""}
  61.             {/* 当isTop为1时显示置顶图标 */}
  62.             {data.isTop ? 
  63.             <div className={styles.isTop}>
  64.                 <svg viewBox="0 0 1024 1024">
  65.                     <path d="M0 0h1024v1024z" fill="#7ED321"></path>
  66.                     <path d="M571.733333 157.866667l17.066667-12.8-83.2-83.2L552.533333 14.933333l183.466667 183.466667-46.933333 46.933333-81.066667-81.066666-17.066667 12.8 100.266667 100.266666-14.933333 14.933334-102.4-102.4c-6.4 4.266667-10.666667 8.533333-17.066667 10.666666l72.533333 72.533334-110.933333 110.933333 36.266667 36.266667-14.933334 14.933333L313.6 209.066667l14.933333-14.933334 36.266667 36.266667 110.933333-110.933333 61.866667 61.866666c6.4-4.266667 10.666667-8.533333 17.066667-10.666666l-96-96 14.933333-14.933334 98.133333 98.133334z m-72.533333 209.066666l17.066667-17.066666-117.333334-117.333334-17.066666 17.066667 117.333333 117.333333z m27.733333-29.866666l14.933334-14.933334L426.666667 204.8l-14.933334 14.933333 115.2 117.333334z m27.733334-27.733334l17.066666-14.933333-117.333333-117.333333-17.066667 14.933333 117.333334 117.333333z m27.733333-25.6l14.933333-14.933333L482.133333 149.333333l-14.933333 14.933334 115.2 119.466666z m10.666667-202.666666L554.666667 44.8l-21.333334 21.333333 38.4 38.4 21.333334-23.466666z m57.6 57.6l-40.533334-40.533334-21.333333 21.333334 40.533333 40.533333 21.333334-21.333333zM704 192l-38.4-38.4-21.333333 21.333333L682.666667 213.333333l21.333333-21.333333zM571.733333 471.466667l12.8-21.333334c8.533333 10.666667 17.066667 19.2 25.6 27.733334 6.4 6.4 12.8 6.4 21.333334-2.133334l172.8-172.8-38.4-38.4 17.066666-17.066666 87.466667 87.466666-17.066667 17.066667-29.866666-29.866667-177.066667 177.066667c-14.933333 14.933333-29.866667 14.933333-44.8 0l-29.866667-27.733333z m302.933334 21.333333l-44.8 44.8c-27.733333 25.6-55.466667 40.533333-83.2 44.8-27.733333 2.133333-59.733333-6.4-96-25.6l6.4-25.6c34.133333 19.2 64 27.733333 87.466666 25.6 23.466667-4.266667 46.933333-14.933333 68.266667-36.266667l44.8-44.8 17.066667 17.066667z m132.266666-21.333333l-17.066666 19.2-55.466667-55.466667c-10.666667 8.533333-19.2 17.066667-29.866667 23.466667l51.2 51.2-119.466666 119.466666-17.066667-17.066666 102.4-102.4-76.8-76.8-104.533333 100.266666-17.066667-17.066666 121.6-121.6 42.666667 42.666666c10.666667-6.4 19.2-14.933333 29.866666-23.466666L861.866667 362.666667l17.066666-17.066667 128 125.866667zM802.133333 682.666667h-25.6c2.133333-25.6 2.133333-55.466667-2.133333-89.6h23.466667c4.266667 34.133333 4.266667 64 4.266666 89.6z" fill="#FFFFFF"></path>
  67.                 </svg>
  68.             </div> : ""}
  69.         </div>
  70.     )
  71. }
  73. export default Item

注意到Item为展示组件，只负责数据的展示，而不负责数据的处理、获取，Item的数据、数据的操作都是从props中获取的，这些操作都由Item的容器组件Home来完成。

我们会将login保存在sessionStorage，login是一个布尔值，保存了是否登录的信息，true表示登录，false表示未登录，根据是否登录，决定是否将删除和编辑的操作暴露出来。同时我们也将根据data的isTop是否为true来显示是否置顶的svg图样(该图样来自CSDN的置顶图样)。

index.module.css

  1. .item {
  2.     width: 100%;
  3.     height: 150px;
  4.     background-color: white;
  5.     margin-bottom: 40px;
  6.     border-radius: 4px;
  7.     padding-left: 25px;
  8.     padding-right: 20px;
  9.     padding-top: 20px;
  10.     position: relative;
  11.     box-shadow:0px 0px 6px 6px #FFF;
  12. }
  14. .item a {
  15.     text-decoration: none;
  16.     color: #40759b;
  17. }
  19. .item a:hover {
  20.     text-decoration: underline;
  21. }
  23. .abstract {
  24.     width: 100%;
  25.     padding-top: 30px;
  26. }
  28. .readmore {
  29.     position: absolute;
  30.     font-size: 14px;
  31.     bottom: 10px;
  32.     right: 10px;
  33. }
  35. .edit {
  36.     position: absolute;
  37.     font-size: 14px;
  38.     bottom: 10px;
  39.     right: 75px;
  40. }
  42. .delete {
  43.     position: absolute;
  44.     font-size: 14px;
  45.     bottom: 10px;
  46.     right: 140px;
  47. }
  49. .isTop {
  50.     position: absolute;
  51.     width: 50px;
  52.     top: 0;
  53.     right: 0;
  54. }

现在进入Home组件，修改Home/index.jsx如下

  1. import React, { useContext } from 'react'
  2. import BasicLayout from './../../layouts/BasicLayout'
  3. import Item from './components/Item'
  4. import {withRouter} from 'react-router-dom'
  5. import {Context} from './../../router'
  6. import { message } from 'antd'
  8. function Home(props) {
  10.     const {history} = props
  11.     // 使用useContext获取Provider提供的数据
  12.     const {state, dispatch} = useContext(Context);
  13.     const login = sessionStorage.getItem("login");
  14.     const datas = state.datas;
  16.     const handleDelete = (id) => {
  17.         dispatch({type: "deleteData", id});
  18.         message.success('删除成功');
  19.     }
  21.     const handleToEdit = (id) => {
  22.         dispatch({type: "changeOperation", operation: "EDIT"})      
  23.         history.push(`/edit/${id}`);
  24.     }
  26.     const handleToDisplay = (id) => {
  27.         history.push(`display/${id}`);
  28.     }
  30.     return (
  31.         <div>
  32.             <BasicLayout>
  33.                 {datas.map((data, index) => {
  34.                     return <Item 
  35.                         index={index} 
  36.                         data={data} 
  37.                         key={index} 
  38.                         login={login}
  39.                         handleDelete={handleDelete}
  40.                         handleToEdit={handleToEdit}
  41.                         handleToDisplay={handleToDisplay}
  42.                         />
  43.                 })}
  44.             </BasicLayout>
  46.         </div>
  47.     )
  48. }
  50. export default withRouter(Home)

现在启动项目(npm start)，观察到页面如下
页面编写 - 图4
说明Home页面已经成功了(由于在sessionStorage中没有login，所以删除本文和编辑本文均显示不出来，当点击阅读更多时，会跳转到Display的页面)。

Display

我们来观察Display的页面
页面编写 - 图5
发现Display页面有一个背景为白色的内容区和一个按钮，这个按钮根据是否有登录来决定是否暴露出来，所以我们在Display中新建一个components文件夹，在里面新建一个Content文件夹，在Content文件夹中新建index.jsx和index.module.css。首先Content是一个展示组件，所以它的数据全部都由Display提供，所有的数据操作也由Display传入回调函数进行处理。

index.jsx如下

  1. import React from 'react'
  2. import { Button } from 'antd'
  3. import styles from './index.module.css'
  5. function Content(props) {
  6.     const {login, htmlContent, handleToEdit} = props
  8.     const toEdit = () => {
  9.         handleToEdit();
  10.     }
  12.     return(
  13.         <div className={styles.display}>
  14.             <div className="braft-output-content"  style={{minHeight: "425px", backgroundColor: "#FFF", padding: "50px 25px", fontSize: "16px", maxWidth: "850px"}} dangerouslySetInnerHTML={{__html: htmlContent}} >
  16.             </div>
  18.             {login && 
  19.                 <div className={styles.edit}>
  20.                     <Button type="primary" onClick={toEdit}>编辑文章</Button>
  21.                 </div>
  22.             }
  23.         </div>
  24.     )
  25. }
  27. export default Content

想必上面的代码还是比较容易理解的，index.module.css的内容如下

  1. .display {
  2.     position: relative;
  3. }
  5. .display ul, .display ol {
  6.     padding-left: 30px;
  7. }
  9. .edit {
  10.     position: absolute;
  11.     top: 10px;
  12.     right: 10px;
  13. }

所以Display中的内容如下

  1. import React, {useContext} from 'react'
  2. import BasicLayout from './../../layouts/BasicLayout'
  3. import {withRouter} from 'react-router-dom'
  4. import Content from './components/Content'
  5. import {Context} from './../../Provider'
  6. import BraftEditor from 'braft-editor'
  8. function Display(props) {
  9.     const {history} = props
  10.     // 获取传过来的id
  11.     const index = Number(history.location.pathname.split("/")[2])
  12.     const {state, dispatch} = useContext(Context)
  13.     const htmlContent = BraftEditor.createEditorState(state.datas[index].content).toHTML()
  14.     const login = sessionStorage.getItem("login")
  16.     const handleToEdit = () => {
  17.         dispatch({type: "changeOperation", operation: "EDIT"});
  18.         history.push(`/edit/${index}`);
  19.     }
  21.     return (
  22.         <BasicLayout>
  23.             <Content
  24.                 htmlContent={htmlContent}
  25.                 login = {login}
  26.                 handleToEdit = {handleToEdit}
  27.             />
  28.         </BasicLayout>
  29.     )
  30. }
  32. export default withRouter(Display)

至此Display页面设计完毕。

Edit

在写Edit页面之前，来改造一下RichText组件，我们要将RichText做成展示组件，所有的数据都由Edit提供，所有的数据处理也由Edit处理，修改如下

  1. import React from 'react'
  2. import BraftEditor from 'braft-editor'
  3. import 'braft-editor/dist/index.css'
  5. function RichText(props) {
  7.     const {value, onChange} = props
  9.     const handleEditorChange = (editorState) => {
  10.         onChange(editorState)
  11.     }
  13.     return (
  14.         <BraftEditor
  15.             value={value}
  16.             onChange={handleEditorChange}
  17.         />
  18.     )
  19. }
  21. export default RichText

现在我们来看一下Edit页面的结构
页面编写 - 图6
我们使用antd的表单来做成这件事情，在前面已经介绍过antd表单的使用，所以这里不多加介绍，直接上代码

  1. import React, {useEffect, useContext} from 'react'
  2. import RichText from './components/RichText'
  3. import { withRouter } from 'react-router-dom'
  4. import { Form, Input, Button, message, Checkbox } from 'antd'
  5. import BasicLayout from './../../layouts/BasicLayout'
  6. import BraftEditor from 'braft-editor'
  7. import {Context} from './../../Provider'
  10. function Edit(props) {
  12.   const {history} = props
  13.   const FormItem = Form.Item;
  14.   const { getFieldDecorator, validateFieldsAndScroll } = props.form;
  15.   const {state, dispatch} = useContext(Context)
  17.   useEffect(() => {
  18.     // 当组件加载后 如果是编辑文章 根据id获取数据 然后显示 
  19.     // 如果是添加操作，则不加载数据 直接显示空白内容
  20.     if(state.operation === 'EDIT') {
  21.         const index = Number(history.location.pathname.split("/")[2]) 
  22.         const data = state.datas[index]
  23.         // setFieldsValue为表单设置内容
  24.         props.form.setFieldsValue({
  25.           ...data, 
  26.           content: BraftEditor.createEditorState(data.content)
  27.         })
  28.     }
  29.   }, [])
  31.   const handleSubmit = (event) => {
  32.     event.preventDefault();
  34.     validateFieldsAndScroll((err, values) => {
  35.       if(!err) {
  36.         // 如果是通过添加按钮进来的 那么拿到数据保存 然后跳转到home页面
  37.         if(state.operation === 'ADD') {
  38.             dispatch({type: 'insertData', data: {
  39.                 ...values,
  40.                 content: values.content.toRAW()
  41.             }});
  42.             message.success("添加成功");
  43.             history.push("/home");
  44.             //如果是编辑文章进来的，更新数据 然后跳转到home
  45.         } else if (state.operation === "EDIT") {
  46.             const id = Number(history.location.pathname.split("/")[2]);
  47.             dispatch({type: "updateData", id, data: {
  48.                 ...values, 
  49.                 content: values.content.toRAW(),
  50.             }});
  51.             message.success("更新成功");
  52.             history.push("/home");
  53.         }
  54.       }
  55.     })
  56.   }
  59.   return (
  60.       <BasicLayout>
  61.         <div>
  62.           <Form onSubmit={handleSubmit}>
  63.             <FormItem labelAlign="left" label="文章标题">
  64.                 {getFieldDecorator('title', {
  65.                   rules: [{
  66.                     required: true,
  67.                     message: '请输入标题',
  68.                   }],
  69.                 })(
  70.                   <Input size="large" placeholder="请输入标题"/>
  71.                 )}
  72.               </FormItem>
  73.             <FormItem size="large" label="文章摘要">
  74.                 {getFieldDecorator('brief', {
  75.                   rules: [{
  76.                     required: true,
  77.                     message: '请输入摘要',
  78.                   }],
  79.                 })(
  80.                   <Input.TextArea style={{fontSize: "16px"}} placeholder="请输入摘要"/>
  81.                 )}
  82.               </FormItem>
  83.             <FormItem>
  84.                 {getFieldDecorator('isTop', {
  85.                   valuePropName: 'checked',
  86.                 })(
  87.                   <Checkbox>
  88.                     是否置顶
  89.                   </Checkbox>,
  90.                 )}
  91.               </FormItem>
  92.             <FormItem label="文章正文">
  93.                 {getFieldDecorator('content', {
  94.                   validateTrigger: 'onBlur',
  95.                   rules: [{
  96.                     required: true,
  97.                     message: "请输入正文"
  98.                   }],
  99.                 })(
  100.                   <RichText />
  101.                 )}
  102.               </FormItem>
  103.             <FormItem>
  104.                 <Button size="large" type="primary" htmlType="submit">提交</Button>
  105.               </FormItem>
  106.           </Form>
  107.         </div>
  108.       </BasicLayout>
  109.   )
  110. }
  112. // 为Edit注入form
  113. export default withRouter(Form.create()(Edit))

上面的代码虽然有点长，但是都是比较容易理解的。注意，虽然我们没有为RichText传入value和onChange，但是由于RichText和表单项进行了双向绑定，所以表单会注入value和onChange。

Login

Login页面应该是最简单的，只要用我们在前面antd表单示例里面的表单就可以完成，所以直接上代码如下

  1. import React from 'react'
  2. import {withRouter} from 'react-router-dom'
  3. import {Form, Button, Input, message } from 'antd'
  4. import LoginLayout from './../../layouts/LoginLayout'
  6. function Login(props) {
  7.     const { form, history } = props;
  9.     const FormItem = Form.Item;
  11.     const {getFieldDecorator, validateFields} = form
  13.     const handleSubmit = (event) => {
  14.         event.preventDefault();
  15.         validateFields((err, values) => {
  16.             if (!err) {
  17.                 if (values.adminId === "123" && values.password === "123") {
  18.                     sessionStorage.setItem("login", true);
  19.                     message.success("登录成功");
  20.                     history.push("/home")
  21.                 } else {
  22.                     message.error("用户名或密码错误")
  23.                 }
  24.             }
  25.         })
  26.     }
  28.     return (
  29.         <LoginLayout>
  30.           <Form onSubmit={handleSubmit}>
  31.             <FormItem labelAlign="left" label="用户名">
  32.                 {getFieldDecorator('adminId', {
  33.                   rules: [{
  34.                     required: true,
  35.                     message: '请输入用户名',
  36.                   }],
  37.                 })(
  38.                   <Input size="large" placeholder="请输入用户名"/>
  39.                 )}
  40.             </FormItem>
  41.             <FormItem size="large" label="密码">
  42.                 {getFieldDecorator('password', {
  43.                   rules: [{
  44.                     required: true,
  45.                     message: '请输入密码',
  46.                   }],
  47.                 })(
  48.                   <Input.Password size="large" placeholder="请输入密码"/>
  49.                 )}
  50.             </FormItem>
  52.             <FormItem>
  53.                 <Button size="large" type="primary" htmlType="submit">提交</Button>
  54.             </FormItem>
  55.           </Form>
  56.         </LoginLayout>
  57.     )
  58. }
  60. export default withRouter(Form.create()(Login))

收尾

在这里还有一个小地方没有处理，那就是Header，里面的a标签的点击事件没有处理，并且我们希望在登录的情况下显示”写博客”，以及在登录的情况下显示”退出登录”，在未登录的情况下显示”登录”，所以修改Header如下(由于要用到history，所以要在Layout里给Header传入history，但是Layout也没有history，所以要在Home, Edit, Display, Login中给用到的Layout传入history，这里的代码就不贴出了，想必这样的事情对现在的你应该已经很简单了)

  1. import React, {useContext} from 'react'
  2. import styles from './index.module.css'
  3. import {Context} from './../../Provider'
  5. function Header(props) {
  7.     const {history} = props;
  8.     const {dispatch} = useContext(Context);
  10.     const login = sessionStorage.getItem("login");
  12.     const toEdit = (e) => {
  13.         e.preventDefault();
  14.         dispatch({type: "changeOperation", operation: "ADD"});
  15.         history.push("/edit");
  16.     }
  18.     const toHome = (e) => {
  19.         e.preventDefault()
  20.         history.push("/home")
  21.     }
  23.     const logout = (e) => {
  24.         e.preventDefault()
  25.         sessionStorage.removeItem("login");
  26.         history.push("/login");
  27.     }
  29.     const login_ = (e) => {
  30.         e.preventDefault()
  31.         history.push("/login");
  32.     }
  34.     return (
  35.         <div className={styles.header}>
  36.             <div className={styles.nav}>
  37.                 <ul>
  38.                     <li><a href="/home" onClick={toHome}>首页</a></li>
  39.                     {login && <li><a href="/edit" onClick={toEdit}>写博客</a></li>}
  40.                     {login ? <li><a href="/login" onClick={logout}>退出登录</a></li> : <li><a href="/login" onClick={login_}>登录</a></li>}
  41.                 </ul>
  42.             </div>
  43.             <div className={styles.desc}>
  44.                 Coder
  45.             </div>
  46.         </div>
  47.     )
  48. }
  50. export default Header

接下来就是数据的持久化，我们希望将数据能够保存到localStorage，这样当页面刷新，关闭页面、浏览器,关机数据都能够保存。修改Provider.jsx

  1. import React, {useReducer} from 'react'
  3. export const Context = React.createContext();
  5. const saveData = (datas) => {
  6.     localStorage.setItem("datas",JSON.stringify(datas) || [])
  7. }
  9. const loadData = () => {
  10.     // 如果datas没有内容，则为空数组，因为后面用到datas.map，放止报错
  11.     return JSON.parse(localStorage.getItem("datas")) || []
  12. }
  14. const reducer = (state, action) => {
  15.     const tempDatas = state.datas
  16.     // 每次对数据进行操作后都保存数据
  17.     switch(action.type) {
  18.         case 'insertData':
  19.             tempDatas[tempDatas.length] = action.data;
  20.             saveData(tempDatas)
  21.             return {...state, datas: tempDatas}
  22.         case 'updateData':
  23.             tempDatas[action.id] = action.data
  24.             saveData(tempDatas)
  25.             return {...state, datas: tempDatas}
  26.         case 'deleteData':
  27.             tempDatas.splice(action.id, 1)
  28.             saveData(tempDatas)
  29.             return {...state, datas: tempDatas}
  30.         case 'changeOperation':
  31.             return {...state, operation: action.operation}
  32.         default:
  33.             return state
  34.     }
  35. }
  37. const initState = {
  38.     // 初始化从localStorage中读取数据
  39.     datas: loadData(),
  40.     operation: 'ADD'
  41. }
  43. function Provider(props) {
  44.     const [state, dispatch] = useReducer(reducer, initState)
  45.     const {children} = props
  47.     return (
  48.         <Context.Provider value={{state, dispatch}}>
  49.             {children}
  50.         </Context.Provider>
  51.     )
  52. }
  54. export default Provider