React系列实战篇：留言功能

Posted 2021-09-06 小和山的菜鸟们

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

实战案例(二)：留言功能改进

学到这里，我们把上面案例给修改一下，不要通过原始的 html 加 CDN 的方法引入 React，我们来采用 React 给我们提供的脚手架来改写一下上次的内容。

创建一个空的 react 项目

首先我们使用 react 官方提供的脚手架来创建一个工程

npm create react-app appname

注意： 在创建工程的时候也许会出现卡住的情况，请保证网络流畅的状态下创建。

组件化开发

我们先将之前的 html 中的输入框和展示框抽象成为组件。

InputCompoent 输入框组件

该输入框组件需要预留一个方法，将输入的内容传输到父组件中，因此我们需要预留一个名为 sendSubmit 的方法，从外部传入，并通过回调的方法进行父子组件通信。

import React, { Component } from \'react\'
import \'./InputComponent.css\'

export default class InputCompoent extends Component {
  constructor() {
    super()
    this.state = {
      inputMess: \'\',
    }
  }
  render() {
    return (
      <div className="sendEvaluate">
        <img className="headImg" src="https://xhs-rookies.com/img/rookie-icon.png"  />
        <div className="inputBox">
          <textarea
            className="inputText"
            placeholder="请输入评论..."
            value={this.state.inputMess}
            onChange={(e) => this.getEvaluate(e)}
          />
          <div className="sendSubmit" onClick={() => this.sendSubmit()}>
            发表
          </div>
        </div>
      </div>
    )
  }
  // 获取输入内容
  getEvaluate(e) {
    this.setState({
      inputMess: e.target.value,
    })
  }
  // 点击执行提交
  sendSubmit() {
    this.props.sendSubmit(this.state.inputMess)
    // 清空输入框内容
    this.setState({
      inputMess: \'\',
    })
  }
}

EvaluateCompoent 列表展示组件

我们只需要给EvaluateCompoent组件传输一个名为evaluateList的属性列表，返回给我们这些评论的内容。

import React, { Component } from \'react\'
import \'./EvaluateCompoent.css\'

export class EvaluateCompoent extends Component {
  render() {
    return (
      <div className="evaluateBox">
        <div className="titleText">大伙的评论</div>
        {/* 接收留言列表参数并遍历展示 */}
        {this.props.evaluateList.map((item) => {
          return (
            <div className="evaluateItem">
              <img className="headImg" src={item.imgUrl}  />
              <div className="senderProfile">
                <div className="nickNameBox">
                  <div className="nickName">{item.nickName}</div>
                  <div className="sendTime">{item.sendTime}</div>
                </div>
                <div className="evaluate">{item.evaluate}</div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default EvaluateCompoent

组合该两个组件并展示出来

我们修改App.js并将内容组合起来。

我们将回调取得的内容放置于主页面的state中，并将该state中的内容传输给EvaluateCompoent展示组件进行展示。

import React, { PureComponent } from \'react\'
import EvaluateCompoent from \'./components/EvaluateCompoent/EvaluateCompoent\'
import InputCompoent from \'./components/InputComponents/InputCompoent\'
import \'./App.css\'

export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      evaluateList: [
        {
          imgUrl: \'https://xhs-rookies.com/img/rookie-icon.png\',
          nickName: \'菜鸟一号\',
          sendTime: \'2021.05.14\',
          evaluate: \'这是一个即将推出系列文章的团队，我们一起期待他们的作品吧！\',
        },
      ],
      message:
        \'你知道有这么一个团队吗？他们怀揣梦想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的时间，选择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目的很简单，希望可以帮助向他们一样的菜鸟们？你想了解更多吗？快搜索微信公众号：小和山的菜鸟们，加入他们吧！\',
    }
  }
  render() {
    return (
      <div className="root">
        <div className="title">Hello React</div>
        <p className="content">{this.state.message}</p>
        <EvaluateCompoent evaluateList={this.state.evaluateList} />
        <InputCompoent sendSubmit={(e) => this.sendSubmit(e)} />
      </div>
    )
  }

  sendSubmit(e) {
    let data = {
      imgUrl: \'https://xhs-rookies.com/img/rookie-icon.png\',
      nickName: \'菜鸟一号\',
      sendTime: \'2021.05.14\',
      evaluate: e,
    }
    this.setState({
      evaluateList: [data, ...this.state.evaluateList],
    })
  }
}

export default App

源码地址

项目 github 地址

直接预览

我们建议采用 codesanbox 的形式可以在线快速访问当前实战案例。

CodeSandBox

下节预告

本节我们运用了 React 脚手架、组件化的思想重写了之前的留言板实战案例，在下一个章节我们将继续学习 React 中组件化通信的内容，敬请期待！