关于javascript:React系列实战篇留言功能一

45次阅读

共计 2538 个字符，预计需要花费 7 分钟才能阅读完成。

快来退出咱们吧！

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

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

实战案例(一)：留言性能

咱们学到这里，就能够简略的应用 HTML 的代码实现一个简略的留言页面。

简略展现：

创立 HTML 文件而后导入 React 依赖

这样就能够应用 React 了，应用 jsx 编写代码

<!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>

创立名为 App 的 class 类

  • 创立 class 类
class App extends React.Component {// class 外部内容}
  • 创立构造函数 constructor
constructor() {super();
  this.state = {
    message: "你晓得有这么一个团队吗？他们怀揣幻想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的工夫，抉择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目标很简略，心愿能够帮忙向他们一样的菜鸟们？你想理解更多吗？快搜寻微信公众号：小和山的菜鸟们，退出他们吧！",
    evaluateList:
    [
      {
        imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
        nickName: "菜鸟一号",
        sendTime: "2021.05.14",
        evaluate: "这是一个行将推出系列文章的团队，咱们一起期待他们的作品吧！",
      },
    ],
    inputMess: "",
  };
}
  • 编写 render 函数
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>
  );
}
  • 其余点击事件函数
        // 获取输出内容
        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: "",
          });
        }
      }
  • 加载 app
ReactDOM.render(<App />, document.getElementById('app'))

源码地址

我的项目 github 地址

下节预报

在这一节咱们将之前学习的常识串联起来做了一个实战小 Demo，坚固了大家的常识，在下一节中，咱们将给大家介绍React 的脚手架常识，应用脚手架疾速搭建一个 React 我的项目！

正文完
javascript
发表至： javascript
2021-06-17
 0
函数式编程（一）
关于javascript:面试可能会问的数组操作
关于javascript:this的指向性问题可以很简单
翻转字符串算法JavaScript