12 脚手架编写React项目（评论管理）---

第一步，拆分组件

 

 一共拆分为4个组件

同时，需要在入口文件 index.js 中，写入：

 

 第二步，实现静态组件

①实现静态组件需要用到的 bootstrap.css 可以放在 public 文件夹下，然后在 index.html 中引入

 

 

 ②根组件APP组件中先进行初步的布局

 

 这里需要注意，组件的首字母要求大写，不能写成 comment_add 形式，

否则报错：

 

 下一步，将 Comment_add 、 Comment_list 组件分别渲染出来，并以同样的方式在 Comment_list 中渲染 Comment_item 组件标签，得到静态组件

 

 第三步，动态渲染数据

①考虑 Comment_add 和 Comment_item 组件都需要数据，所以数据应该保存在 App 组件中，且数据应该是一个数组，数组中的每个元素是一个对象，

首先在根组件中定义 state

 

并通过 Comment_list 组件标签，将 数据传给 Commet_list 再传给 Comment_item 组件便签

注意，这里Comment_list 组件标签接收的是一个 comments 数组，而Comment_item 接收的是一个 comment 对象

给当前的组件类指定属性的简洁格式是：

 

 注意，现得引入 PropTypes 这个包，才可以使用 props 这个属性，通过 npm install --save prop-types 命令可以全局安装这个包，

然后直接在组件类中引入，

 

 Comment_list 将comment 对象传给 Comment_item时，需要用到 map 结构

 

Comment_item 限制接收数据类型是对象：

 

Comment_item 标签渲染后的结果是：

 

第四步：添加评论实现

从时间监听开始，点击提交按钮时绑定事件监听，收集表单数据，并且在根组件中更新状态，其中，收集表单数据，可以采用受控组件和非受控组件两种方式

方式①受控组件方式

comment_add.jsx

 

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Comment_add extends Component {
    static propTypes={
        addData:PropTypes.func.isRequired,
    }

    state={
            username:'',
            content:'',
    }

    nameChange=(event)=>{
        this.setState({
            username:event.target.value
        });
        
    }
    contentChange=(event)=>{
        this.setState({
            content:event.target.value
        });
    }

    handleSubmit=()=>{
        const {addData}=this.props;
        const comment=this.state;

        addData(comment);
        //清空表单
        this.setState({
            username: '',
            content: '',
        })
    }

    render() {
        const {username,content}=this.state;
        return (
            <div>
                <form>
                    <div className="form-group">
                        <label htmlFor="username">用户名</label><br/>
                        <input type="text" id="username" className="form-control"  value={username} onChange={this.nameChange}/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="content">评论内容</label><br/>
                        <textarea id="content" cols="47" rows="10" value={content} onChange={this.contentChange}></textarea>
                    </div>
                    <button type="button" className="btn btn-default pull-right" onClick={this.handleSubmit}>提交</button>
                </form>
            </div>
        )
    }

}

 

方式②非受控组件方式

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Comment_add extends Component {
    static propTypes={
        addData:PropTypes.func.isRequired,
    }

    handleSubmit=()=>{
      const {addData}=this.props;
      let username=this.refs.name_input.value;
      let content=this.refs.content_textarea.value;
      let comment={
          username,
          content,
      }
      addData(comment);
      //清空输入框
      this.refs.name_input.value='';
      this.refs.content_textarea.value='';
    }

    render() {
        return (
            <div>
                <form>
                    <div className="form-group">
                        <label htmlFor="username">用户名</label><br/>
                        <input type="text" id="username" className="form-control" ref="name_input"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="content">评论内容</label><br/>
                        <textarea id="content" cols="47" rows="10" ref="content_textarea"></textarea>
                    </div>
                    <button type="button" className="btn btn-default pull-right" onClick={this.handleSubmit}>提交</button>
                </form>
            </div>
        )
    }

}

 

 

 

需要注意的是：提交button 的 type 是 button， 不是 submit，否则会出现添加一条数据之后立刻恢复初始状态的情况

第五步：删除指定评论实现

删除 comments 数据 考虑是根据数组的下标删除对应的数据，

删除 : splice （index,1）从下标开始删一个数据，即删除当前这个下标对应的数据

这里删除事件是在 comment_item 组件中的，而数据在 根组件中，需要先传给 comment_list 组件，再传给 comment_item 组件

删除之前可以使用 window.conform( ) 和用户确定是否要删除，

当所以评论全部删除之后，在commnet_list 渲染 comment_item 组件标签时，应该要显示一句“暂无评论，去左侧添加评论”的提示语句，该语句可以用一个变量控制显示和隐藏。