react实现留言板功能(发布删除留言)

emmmm先看一下效果图(移动端)

react实现留言板功能(发布删除留言)_第1张图片

1.开始吧!先来看看render方法返回哪些数据渲染到页面上

react实现留言板功能(发布删除留言)_第2张图片

2.看完返回的数据,就来看看state里面有些什么东西(content、list、date)

react实现留言板功能(发布删除留言)_第3张图片

3.然后看一下点击发布的submit函数是怎么执行的(注意使用箭头函数submit=()=>{},还有每一次更新state数据,都必须this.setState())

react实现留言板功能(发布删除留言)_第4张图片

4.再看看删除函数delete吧(主要是splice方法)

react实现留言板功能(发布删除留言)_第5张图片

5.就这么多了,最后要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

react实现留言板功能(发布删除留言)_第6张图片

6.css的代码就不贴出来了,噢,还有前面引入js的代码贴一下吧

react实现留言板功能(发布删除留言)_第7张图片

7.没了没了,希望对你有帮助!

你可能感兴趣的:(react)