React系列實戰篇：留言功能（一）

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( xhs-rookies.com/ ) 進行學習，及時獲取最新文章。javascript

"Code tailor" ，若是您對咱們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公衆號，與咱們取的聯繫，您也能夠在微信上觀看咱們的文章。每個建議或是贊同都是對咱們極大的鼓勵！html

實戰案例(一)：留言功能

咱們學到這裏，就能夠簡單的使用 HTML 的代碼實現一個簡單的留言頁面。前端

簡單展現：java

建立 HTML 文件而後導入 React 依賴

這樣就能夠使用 React 了，使用 jsx 編寫代碼react

<!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 地址git

下節預告

在這一節咱們將以前學習的知識串聯起來作了一個實戰小Demo，鞏固了你們的知識，在下一節中，咱們將給你們介紹React的腳手架知識，使用腳手架快速搭建一個React項目！github