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

最新推荐文章于 2022-09-03 12:30:00 发布

ABU_MOlI_ITUI

最新推荐文章于 2022-09-03 12:30:00 发布

阅读量230

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/108071347

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

评论管理页面：

步骤：

首先，当拿到图时，对图片进行组件拆分（这里评论管理我拆分为四个部分：App、Add、List、Item）

实现静态组件页面：在public---下建立css添加bootstrap.css,在src下：新建四个文件夹，并且每个里面添加jsx页面

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>
        )
    }
}

但是这里控制台会报错：

解决办法：

是因为我们在使用 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>

实现初始化数据动态显示（这里面包含以前写法，和现在方法的简化比较） 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>
        )
    }
}

评论管理的交互----添加 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>
        )
    }
}

评论管理的交互----删除 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>
        )
    }
}

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react--学习笔记9（demo---评论管理练习）

评论管理页面：步骤：首先，当拿到图时，对图片进行组件拆分（这里评论管理我拆分为四个部分：App、Add、List、Item）实现静态组件页面：在public---下建立css添加bootstrap.css,在src下：新建四个文件夹，并且每个里面添加jsx页面 ...
复制链接

扫一扫