react--学习笔记9（demo---评论管理练习）

阳光穿透心脏的1/2处 2022-11-28 13:48 145阅读 0赞

### 评论管理页面： ###

**步骤：**

1.  **首先，当拿到图时，对图片进行组件拆分（这里评论管理我拆分为四个部分：App、Add、List、Item）**
2.  **实现静态组件页面：在public---下建立css添加bootstrap.css,在src下：新建四个文件夹，并且每个里面添加jsx页面                                                                                                                                                                                                                             **
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]
    
    **                                                                                                                                                                                                   component-app.jsx中：                                                                                                                                                                                    **
    
        import React, { Component } from 'react'
        import Add from '../component-add/component-add'
        import List from '../component-list/component-list'
        export default class App extends Component{
            render(){
                return(
                    <div>
                    <header className="site-header jumbotron">
                      <div className="container">
                        <div className="row">
                          <div className="col-xs-12">
                            <h1>请发表对React的评论</h1>
                          </div>
                        </div>
                      </div>
                    </header>
                    <div className="container">
                     <Add />
                     <List />
                    </div>
                  </div>
                )
            }
        }
    
    **  component-add.jsx                                                                                                                                                                                                         **
    
        import React, { Component } from 'react'
        import { render } from 'react-dom'
        
        export default class Add extends Component{
            render() {
                return(
                    <div className="col-md-4">
                        <form className="form-horizontal">
                          <div className="form-group">
                            <label>用户名</label>
                            <input type="text" className="form-control" placeholder="用户名" />
                          </div>
                          <div className="form-group">
                            <label>评论内容</label>
                            <textarea className="form-control" rows="6" placeholder="评论内容"></textarea>
                          </div>
                          <div className="form-group">
                            <div className="col-sm-offset-2 col-sm-10">
                              <button type="button" className="btn btn-default pull-right">提交</button>
                            </div>
                          </div>
                        </form>
                      </div>
                )
            }
        }
    
    **  component-list.jsx                                                                                                                                                                   **
    
        import React, { Component } from 'react'
        import './component-list.css'
        export default class List extends Component{
            render(){
                return(
                    <div className="col-md-8">
                    <h3 className="reply">评论回复：</h3>
                    <h2 style={
             {display: 'none'}}>暂无评论，点击左侧添加评论！！！</h2>
                    <ul className="list-group">
                      <li className="list-group-item">
                        <div className="handle">
                          <a href="javascript:;">删除</a>
                        </div>
                        <p className="user"><span >xxx</span><span>说:</span></p>
                        <p className="centence">React不错!</p>
                      </li>
                      <li className="list-group-item">
                        <div className="handle">
                          <a href="javascript:;">删除</a>
                        </div>
                        <p className="user"><span >yyy</span><span>说:</span></p>
                        <p className="centence">React有点难!</p>
                      </li>
                    </ul>
                  </div>
                )
            }
        }
    
           
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]
    
    但是这里控制台会报错：                                                                                                                                                                                                                                                                                                                                                                   
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2][]
    
     
    
    解决办法：
    
    是因为我们在使用 a 标签时，`href`属性可以用于指定超链接目标的 URL，其值可以使任何有效文档的相对的或绝对的 URL，包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容，浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档，或者 执行 JavaScript 表达式、方法和函数的列表。  
    若用户不想用 a 标签的跳转能力时，往往会通过插入 js 代码段的方式，设置 href 值为`javascript:;`或`javascript:void(0)` 以期达到 href 无跳转的效果。但是这样写代码会被 react 在控制台报如下错误：
    
    ## 解决办法：属性值使用`#`或者`#!                              ` ##
    
        <a href="javascript:;">删除</a>
        
        修改：
        
        <a href="#！">删除</a>
    
                                                                                                                                                                                                    
3.  **  实现初始化数据动态显示（这里面包含以前写法，和现在方法的简化比较）                                                                             component-app.jsx                                                                                                                                                                 ** 
    
        import React, { Component } from 'react'
        import Add from '../component-add/component-add'
        import List from '../component-list/component-list'
        export default class App extends Component{
            //1.初始化数据旧的写法
            // constructor(props){
            //     super(props)
            //     this.state={
            //         comments: [
            //             {username : 'LISA', content: '太棒了，加油吧，努力吧'},
            //             {username : 'IALY', content: '向阳之花'}
            //         ]
            //     }
            // }
            state={
                        comments: [
                            {username : 'LISA', content: '太棒了，加油吧，努力吧'},
                            {username : 'IALY', content: '向阳之花'}
                        ]
                    }
        
            render(){
                const {comments} =this.state
                return(
                    <div>
                    <header className="site-header jumbotron">
                      <div className="container">
                        <div className="row">
                          <div className="col-xs-12">
                            <h1>请发表对React的评论</h1>
                          </div>
                        </div>
                      </div>
                    </header>
                    <div className="container">
                     <Add />
                     <List comments={comments}/>
                    </div>
                  </div>
                )
            }
        }
    
    **                                                                                                                                                                                         component-list.jsx                                                                                                                                                                       ** 
    
        import React, { Component } from 'react'
        import PropTypes from 'prop-types'
        import Item from '../component-item/component-item'
        import './component-list.css'
        export default class List extends Component{
             static propTypes={
                    comments:PropTypes.array.isRequired
                }
            render(){
                const { comments } =this.props
                return(
                    <div className="col-md-8">
                    <h3 className="reply">评论回复：</h3>
                    <h2 style={
             {display: 'none'}}>暂无评论，点击左侧添加评论！！！</h2>
                    <ul className="list-group">
                     {
                     comments.map((commentt,index)=><Item comments={commentt} key={index}/>)
                     }
                    </ul>
                  </div>
                )
            }
        }
        
        //旧版本检验
        // List.PropTypes={
        //     comments:PropTypes.array.isRequired
        // }
    
    **                                                                                                                                                                                  component-item.jsx                                                                                                                                                                        **
    
        import React, { Component } from 'react'
        import PropTypes from 'prop-types'
        import './component-item.css'
        
        export default class Item extends Component{
            static propTypes={
                comments:PropTypes.object.isRequired
            }
            render(){
                const {comments} =this.props
                return(
                    <div>
                        <li className="list-group-item">
                        <div className="handle">
                          <a href="#!">删除</a>
                        </div>
                <p className="user"><span >{comments.username }</span><span>说:</span></p>
                        <p className="centence">{comments.content}</p>
                      </li>
                    </div>
                )
            }
        }
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3][]
    
     
4.  **评论管理的交互----添加                                                                                                                                                               app.jsx**                                                                                                                                                                                               
    
        import React, { Component } from 'react'
        import Add from '../component-add/component-add'
        import List from '../component-list/component-list'
        export default class App extends Component{
            //1.初始化数据旧的写法
            // constructor(props){
            //     super(props)
            //     this.state={
            //         comments: [
            //             {username : 'LISA', content: '太棒了，加油吧，努力吧'},
            //             {username : 'IALY', content: '向阳之花'}
            //         ]
            //     }
            // }
            //数据在那个组件，更新数据的行为就在那个组件
            state={
                        comments: [
                            {username : 'LISA', content: '太棒了，加油吧，努力吧'},
                            {username : 'IALY', content: '向阳之花'}
                        ]
                    }
            addComment = (comment) =>{
             const { comments } =this.state
             //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
             comments.unshift(comment)
             this.setState({comments})
            }
        
            render(){
                const {comments} =this.state
                return(
                    <div>
                    <header className="site-header jumbotron">
                      <div className="container">
                        <div className="row">
                          <div className="col-xs-12">
                            <h1>请发表对React的评论</h1>
                          </div>
                        </div>
                      </div>
                    </header>
                    <div className="container">
                     <Add addComment={this.addComment}/>
                     <List comments={comments}/>
                    </div>
                  </div>
                )
            }
        }
    
          add.jsx**                                                                                                                                                                                     **
    
        import React, { Component } from 'react'
        import { render } from 'react-dom'
        import PropTypes from 'prop-types'
        
        export default class Add extends Component{
        
            static propTypes={
                addComment:PropTypes.func.isRequired
            }
            //受控组件需要state
            state={
                username : '',
                content :''
            }
        
            handleUserNameChange = (event) => {
                //event.target.value获取当前文本框的值
            const username =event.target.value
            this.setState({username})
            }
        
            handleContentChange = (event) => {
            const content =event.target.value
            this.setState({content})
            }
        
        //旧的方法handleSubmit需要写绑定事件bind，新的方法用括号代替
            handleSubmit = () => {
            //收集数据,并封装comment对象
            const comment =this.state
        
            // 更新数据
            this.props.addComment(comment)
            //清除输入数据
            this.setState({
                username:'',
                content:''
            })
            }
            render() {
                const {username, content} =this.state
                return(
                    <div className="col-md-4">
                        <form className="form-horizontal">
                          <div className="form-group">
                            <label>用户名</label>
                            <input type="text" className="form-control" placeholder="用户名" 
                            value={username} onChange={this.handleUserNameChange}/>
                          </div>
                          <div className="form-group">
                            <label>评论内容</label>
                            <textarea className="form-control" rows="6" placeholder="评论内容" 
                            value={content} onChange={this.handleContentChange}></textarea>
                          </div>
                          <div className="form-group">
                            <div className="col-sm-offset-2 col-sm-10">
                              <button type="button" className="btn btn-default pull-right" onClick={this.handleSubmit}>提交</button>
                            </div>
                          </div>
                        </form>
                      </div>
                )
            }
        }
    
     **         **
    
    ![20200818154933275.gif][]
5.  **评论管理的交互----删除                                                                                                                                                               app.jsx**                                                                                                                                                                                               
    
        import React, { Component } from 'react'
        import Add from '../component-add/component-add'
        import List from '../component-list/component-list'
        export default class App extends Component{
            //1.初始化数据旧的写法
            // constructor(props){
            //     super(props)
            //     this.state={
            //         comments: [
            //             {username : 'LISA', content: '太棒了，加油吧，努力吧'},
            //             {username : 'IALY', content: '向阳之花'}
            //         ]
            //     }
            // }
            //数据在那个组件，更新数据的行为就在那个组件
            state={
                        comments: [
                            {username : 'LISA', content: '太棒了，加油吧，努力吧'},
                            {username : 'IALY', content: '向阳之花'}
                        ]
                    }
            // 添加评论
            addComment = (comment) =>{
             const { comments } =this.state
             //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
             comments.unshift(comment)
             this.setState({comments})
            }
            // 删除指定评论
            deleteComment = (index) => {
           const { comments } =this.state
           //splic可以删除，替换，增，----splice(index, 1)、splice(index, 1,{})、splice(index, 0,{})
           comments.splice(index, 1)
           this.setState({comments})
            }
            render(){
                const {comments} =this.state
                return(
                    <div>
                    <header className="site-header jumbotron">
                      <div className="container">
                        <div className="row">
                          <div className="col-xs-12">
                            <h1>请发表对React的评论</h1>
                          </div>
                        </div>
                      </div>
                    </header>
                    <div className="container">
                     <Add addComment={this.addComment}/>
                     <List comments={comments} deleteComment={this.deleteComment}/>
                    </div>
                  </div>
                )
            }
        }
    
                                                                                                                                                                                             list.jsx                                                                                                                                                                                                 
    
        import React, { Component } from 'react'
        import PropTypes from 'prop-types'
        import Item from '../component-item/component-item'
        import './component-list.css'
        export default class List extends Component{
             static propTypes={
                    comments:PropTypes.array.isRequired,
                    deleteComment:PropTypes.func.isRequired
                }
            render(){
                const { comments , deleteComment} =this.props
                return(
                    <div className="col-md-8">
                    <h3 className="reply">评论回复：</h3>
                    <h2 style={
             {display: 'none'}}>暂无评论，点击左侧添加评论！！！</h2>
                    <ul className="list-group">
                     {
                     comments.map((commentt,index)=><Item comments={commentt} key={index} 
                     deleteComment={deleteComment} index={index}/>)
                     }
                    </ul>
                  </div>
                )
            }
        }
        
        //旧版本检验
        // List.PropTypes={
        //     comments:PropTypes.array.isRequired
        // }
    
                                                                                                                                                                                                item.jsx                                                                                                                                                                                         
    
        import React, { Component } from 'react'
        import PropTypes from 'prop-types'
        import './component-item.css'
        
        export default class Item extends Component{
            static propTypes={
                comments:PropTypes.object.isRequired,
                deleteComment:PropTypes.func.isRequired,
                index:PropTypes.number.isRequired
            }
        
            handleClick=()=>{
                //提示
               const {comments, deleteComment, index} =this.props
               if(window.confirm(`确定删除${comments.username}的评论吗？`)){
         // 确定后删除
              deleteComment(index)
               }
               
        
            }
            render(){
                const {comments} =this.props
                return(
                    <div>
                        <li className="list-group-item">
                        <div className="handle">
                          <a href="#!" onClick={this.handleClick}>删除</a>
                        </div>
                <p className="user"><span >{comments.username }</span><span>说:</span></p>
                        <p className="centence">{comments.content}</p>
                      </li>
                    </div>
                )
            }
        }
    
    **                                                                                                                                                            **

![20200818162507903.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221124/b30683820ceb4bb093ed2f6106417917.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221124/ec65847814b948f5bd9e006da6b9c69a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2]: /images/20221124/6538941186ec4d53a1a6570f5ffac4d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3]: /images/20221124/45b7e2ad65094558bca4ff5c929e4bdc.png
[20200818154933275.gif]: /images/20221124/724d379337494149b7b7c4006258fa4e.png
[20200818162507903.gif]: /images/20221124/c8d302f5736e4f14ae8c4f293d9d0f27.png