React series combat articles: message function (1)

join us!

160d2a3bc1e5d0 " , providing front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (160d2a3bc1e5d9 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 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 (1): message function

We have learned here, we can simply use HTML code to implement a simple message page.

Simple display:

Create HTML file and import React dependencies

So you can use React , use jsx write code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>留言功能 HTML 版</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // write class here
    </script>
  </body>
</html>

Create a class named App

Create class class

class App extends React.Component {
  // class 内部内容
}

Create the constructor constructor

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

Write render function

render() {
  return (
    <div className="root">
      <div className="title">Hello React</div>
      <p className="content">{this.state.message}</p>
      <div className="evaluateBox">
        <div className="titleText">大伙的评论</div>
          {/* 遍历留言列表 */}
          {this.state.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>
      {/* 留言输入框 */}
      <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>
    </div>
  );
}

Other click event functions

        // 获取输入内容
        getEvaluate(e) {
          console.log(e.target.value);
          this.setState({
            inputMess: e.target.value,
          });
        }
        // 发送留言并清空输入框
        sendSubmit() {
          let data = [
            {
              imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
              nickName: "菜鸟一号",
              sendTime: "2021.05.14",
              evaluate: this.state.inputMess,
            },
          ];
          this.setState({
            // 将原数据和新数据插入 留言列表
            evaluateList: [...data, ...this.state.evaluateList],
            inputMess: "",
          });
        }
      }

Load app

ReactDOM.render(<App />, document.getElementById('app'))

Source address

project github address

Preview of the next section

In this section, we combined the knowledge we learned before and made a practical small Demo to consolidate everyone's knowledge. In the next section, we will introduce React the scaffolding knowledge of 060d2a3bc1ea4a, and use the scaffolding to quickly build a React project!

React series combat articles: message function (1)

join us!

Practical case (1): message function

Create HTML file and import React dependencies

Create a class named App

Source address

Preview of the next section

小和山的菜鸟们

引用和评论

前端面试系列六：手写程序算法题

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合