React series combat articles: message function (2)

join us!

160dc63d23ac93 " , provides technical related information and a series of basic articles for front-end developers. For a better user experience, please move to our official website rookies (160dc63d23ac99 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Practical case (2): Improvement of the message function

After learning this, let's modify the above case. Don't introduce React html plus CDN method. Let's use React to rewrite the last content.

Create an empty react project

First, we use the scaffolding provided by React to create a project

npm create react-app appname

Note: may get stuck when creating the project. Please make sure that the network is smooth to create.

Component development

We first abstract the input boxes and display boxes in the html

InputCompoent input box component

The input box component needs to reserve a method to transmit the input content to the parent component, so we need to reserve a sendSubmit , which is passed in from the outside and communicates with the parent-child component through the callback method.

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" alt="" />
        <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 list display component

We only need to transmit a evaluateList EvaluateCompoent component, and return the content of these comments to us.

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} alt="" />
              <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

Combine the two components and show them

We modify App.js and combine the contents.

We place the content obtained by the callback in state on the main page, and transfer the content state EvaluateCompoent display component for display.

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

Source address

project github address

Direct preview

We recommend using codesanbox to quickly access current actual cases online.

CodeSandBox

Preview of the next section

In this section, we used the ideas of React scaffolding and componentization to rewrite the previous actual case of the message board. In the next chapter, we will continue to learn the content of componentized communication in React, so stay tuned!