Props、State、Refs 與表單處理

前言

在前面的章節中我們已經對於 React 和 JSX 有初步的認識，我們也了解到 React Component 事實上可以視為顯示 UI 的一個狀態機（state machine），而這個狀態機根據不同的 state（透過 setState() 修改）和 props（由父元素傳入），Component 會出現對應的顯示結果。本章將使用 React 官網首頁上的範例（使用 ES6+）來更進一步說明 Props 和 State 特性及在 React 如何進行事件和表單處理。

Props

首先我們使用 React 官網上的 A Simple Component 來說明 props 的使用方式。由於傳入元件的 name 屬性為 Mark，故以下程式碼將會在瀏覽器顯示 Hello, Mark。針對傳入的 props 我們也有驗證和預設值的設計，讓我們撰寫的元件可以更加穩定健壯（robust）。

HTML Markup：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>A Component Using External Plugins</title>
  7. </head>
  8. <body>
  9. <!-- 這邊方便使用 CDN 方式引入 react 、 react-dom 進行講解，實務上和實戰教學部分我們會使用 webpack -->
  10. <script src="https://fb.me/react-15.1.0.js"></script>
  11. <script src="https://fb.me/react-dom-15.1.0.js"></script>
  12.   <div id="app"></div>
  13.     <script src="./app.js"></script>
  14. </body>
  15. </html>

app.js，使用 ES6 Class Component 寫法：

  1. class HelloMessage extends React.Component {
  2.     // 若是需要綁定 this.方法或是需要在 constructor 使用 props，定義 state，就需要 constructor。若是在其他方法（如 render）使用 this.props 則不用一定要定義 constructor
  3.     constructor(props) {
  4.         // 對於 OOP 物件導向程式設計熟悉的讀者應該對於 constructor 建構子的使用不陌生，事實上它是 ES6 的語法糖，骨子裡還是 prototype based 物件導向程式語言。透過 extends 可以繼承 React.Component 父類別。super 方法可以呼叫繼承父類別的建構子
  5.         super(props);
  6.         this.state = {}
  7.     }
  8.     // render 是唯一必須的方法，但如果是單純 render UI 建議使用 Functional Component 寫法，效能較佳且較簡潔
  9.     render() {
  10.         return (
  11.             <div>Hello {this.props.name}</div>
  12.         )
  13.     }
  14. }
  16. // PropTypes 驗證，若傳入的 props type 不是 string 將會顯示錯誤
  17. HelloMessage.propTypes = {
  18.   name: React.PropTypes.string,
  19. }
  21. // Prop 預設值，若對應 props 沒傳入值將會使用 default 值 Zuck
  22. HelloMessage.defaultProps = {
  23.  name: 'Zuck',
  24. }
  26. ReactDOM.render(<HelloMessage name="Mark" />, document.getElementById('app'));

關於 React ES6 class constructor super() 解釋可以參考 React ES6 class constructor super() 。

使用 Functional Component 寫法：

  1. // Functional Component 可以視為 f(d) => UI，根據傳進去的 props 繪出對應的 UI。注意這邊 props 是傳入函式的參數，因此取用 props 不用加 this
  2. const HelloMessage = (props) => (
  3.     <div>Hello {props.name}</div>
  4. );
  6. // PropTypes 驗證，若傳入的 props type 不是 string 將會顯示錯誤
  7. HelloMessage.propTypes = {
  8.   name: React.PropTypes.string,
  9. }
  11. // Prop 預設值，若對應 props 沒傳入值將會使用 default 值 Zuck。用法等於 ES5 的 getDefaultProps
  12. HelloMessage.defaultProps = {
  13.  name: 'Zuck',
  14. }
  16. ReactDOM.render(<HelloMessage name="Mark" />, document.getElementById('app'));

在 jsbin 上的範例：

A Component Using External Plugins on jsbin.com

State

接下來我們將使用 A Stateful Component 這個範例來講解 State 的用法。在 React Component 可以自己管理自己的內部 state，並用 this.state 來存取 state。當 setState() 方法更新了 state 後將重新呼叫 render() 方法，重新繪製 component 內容。以下範例是一個每 1000 毫秒（等於1秒）就會加一的累加器。由於這個範例是 Stateful Component 因此僅使用 ES6 Class Component，而不使用 Functional Component。

HTML Markup：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>A Component Using External Plugins</title>
  7. </head>
  8. <body>
  9. <script src="https://fb.me/react-15.1.0.js"></script>
  10. <script src="https://fb.me/react-dom-15.1.0.js"></script>
  11.   <div id="app"></div>
  12.     <script src="./app.js"></script>
  13. </body>
  14. </html>

app.js：

  1. class Timer extends React.Component {
  2.     constructor(props) {
  3.         super(props);
  4.         // 與 ES5 React.createClass({}) 不同的是 component 內自定義的方法需要自行綁定 this context，或是使用 arrow function
  5.         this.tick = this.tick.bind(this);
  6.         // 初始 state，等於 ES5 中的 getInitialState
  7.         this.state = {
  8.             secondsElapsed: 0,
  9.         }
  10.     }
  11.     // 累加器方法，每一秒被呼叫後就會使用 setState() 更新內部 state，讓 Component 重新 render
  12.     tick() {
  13.         this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  14.     }
  15.     // componentDidMount 為 component 生命週期中階段 component 已插入節點的階段，通常一些非同步操作都會放置在這個階段。這便是每1秒鐘會去呼叫 tick 方法
  16.     componentDidMount() {
  17.         this.interval = setInterval(this.tick, 1000);
  18.     }
  19.     // componentWillUnmount 為 component 生命週期中 component 即將移出插入的節點的階段。這邊移除了 setInterval 效力
  20.     componentWillUnmount() {
  21.         clearInterval(this.interval);
  22.     }
  23.     // render 為 class Component 中唯一需要定義的方法，其回傳 component 欲顯示的內容
  24.     render() {
  25.         return (
  26.           <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
  27.         );
  28.     }
  29. }
  31. ReactDOM.render(<Timer />, document.getElementById('app'));

關於 Javascript this 用法可以參考 Javascript：this用法整理。

事件處理（Event Handle）

在前面的內容我們已經學會如何使用 props 和 state，接下來我們要更進一步學習在 React 內如何進行事件處理。下列將使用 React 官網的 An Application 當做例子，實作出一個簡單的 TodoApp。

HTML Markup：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>A Component Using External Plugins</title>
  7. </head>
  8. <body>
  9. <script src="https://fb.me/react-15.1.0.js"></script>
  10. <script src="https://fb.me/react-dom-15.1.0.js"></script>
  11.   <div id="app"></div>
  12.     <script src="./app.js"></script>
  13. </body>
  14. </html>

app.js：

  1. // TodoApp 元件中包含了顯示 Todo 的 TodoList 元件，Todo 的內容透過 props 傳入 TodoList 中。由於 TodoList 僅單純 Render UI 不涉及內部 state 操作是 stateless component，所以使用 Functional Component 寫法。需要特別注意的是這邊我們用 map function 來迭代 Todos，需要留意的是每個迭代的元素必須要有 unique key 不然會發生錯誤（可以用自定義 id，或是使用 map function 的第二個參數 index）
  2. const TodoList = (props) => (
  3.     <ul>
  4.         {
  5.             props.items.map((item) => (
  6.                 <li key={item.id}>{item.text}</li>
  7.             ))
  8.         }
  9.     </ul>
  10. )
  12. // 整個 App 的主要元件，這邊比較重要的是事件處理的部份，內部有
  13. class TodoApp extends React.Component {
  14.     constructor(props) {
  15.         super(props);
  16.         this.onChange = this.onChange.bind(this);
  17.         this.handleSubmit = this.handleSubmit.bind(this);
  18.         this.state = {
  19.             items: [],
  20.             text: '',
  21.         }
  22.     }
  23.     onChange(e) {
  24.         this.setState({text: e.target.value});
  25.     }
  26.     handleSubmit(e) {
  27.         e.preventDefault();
  28.         const nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
  29.         const nextText = '';
  30.         this.setState({items: nextItems, text: nextText});
  31.     }
  32.     render() {
  33.         return (
  34.           <div>
  35.             <h3>TODO</h3>
  36.             <TodoList items={this.state.items} />
  37.             <form onSubmit={this.handleSubmit}>
  38.               <input onChange={this.onChange} value={this.state.text} />
  39.               <button>{'Add #' + (this.state.items.length + 1)}</button>
  40.             </form>
  41.           </div>
  42.         );
  43.     }
  44. }
  46. ReactDOM.render(<TodoApp />, document.getElementById('app'));

以上介紹了 React 事件處理的部份，除了 onChange 和 onSubmit 外，React 也封裝了常用的事件處理，如 onClick 等。若想更進一步了解有哪些可以使用的事件處理方法可以參考 官網的 Event System。

Refs 與表單處理

上面介紹了 props（傳入後就不能修改）、state（隨著使用者互動而改變）和事件處理機制後，我們將接續介紹如何在 React 中進行表單處理。同樣我們使用 React 官網範例 A Component Using External Plugins 進行介紹。由於 React 可以容易整合外部的 libraries（例如：jQuery），本範例將使用 remarkable 結合 ref 屬性取出 DOM Value 值（另外比較常用的作法是使用 onChange 事件處理方式處理表單內容），讓使用者可以使用 Markdown 語法的所見即所得編輯器（editor）。

HTML Markup（除了引入 react 、 react-dom 還要用 CDN 方式引入 remarkable 這個 Markdown 語法 parser 套件，記得如果沒有使用 Webpack 或是 browserify + babelify 等工具需要引入 babel-standalone 瀏覽器解析 ES6 語法並於引入 script 加上 type=”text/babel”）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>A Component Using External Plugins</title>
  7. </head>
  8. <body>
  9. <script src="https://fb.me/react-15.1.0.js"></script>
  10. <script src="https://fb.me/react-dom-15.1.0.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
  12. <script src="https://cdn.jsdelivr.net/remarkable/1.6.2/remarkable.min.js"></script>
  13.   <div id="app"></div>
  14.     <script type="text/babel" src="./app.js"></script>
  15. </body>
  16. </html>

app.js：

  1. class MarkdownEditor extends React.Component {
  2.     constructor(props) {
  3.         super(props);
  4.         this.handleChange = this.handleChange.bind(this);
  5.         this.rawMarkup = this.rawMarkup.bind(this);
  6.         this.state = {
  7.             value: 'Type some *markdown* here!',
  8.         }
  9.     }
  10.     handleChange() {
  11.         this.setState({value: this.refs.textarea.value});
  12.     }
  13.     // 將使用者輸入的 Markdown 語法 parse 成 HTML 放入 DOM 中，React 通常使用 virtual DOM 作為和 DOM 溝通的中介，不建議直接由操作 DOM。故使用時的屬性為 dangerouslySetInnerHTML
  14.     rawMarkup() {
  15.         const md = new Remarkable();
  16.         return { __html: md.render(this.state.value) };
  17.     }
  18.     render() {
  19.         return (
  20.           <div className="MarkdownEditor">
  21.             <h3>Input</h3>
  22.             <textarea
  23.               onChange={this.handleChange}
  24.               ref="textarea"
  25.               defaultValue={this.state.value} />
  26.             <h3>Output</h3>
  27.             <div
  28.               className="content"
  29.               dangerouslySetInnerHTML={this.rawMarkup()}
  30.             />
  31.           </div>
  32.         );
  33.     }
  34. }
  36. ReactDOM.render(<MarkdownEditor />, document.getElementById('app'));

總結

以上透過幾個 React 官網首頁上的範例介紹了 Props 和 State 特性及在 React 如何進行事件和表單處理這些 React 中核心的問題，若還不熟悉的讀者建議重新親自動手照著範例中的程式碼敲過一遍，也可以使用像 jsbin 這樣所見即所得的工具來練習，更能熟悉相關語法和 API 喔！接下來我們將探討 Component 的生命週期。

延伸閱讀

  1. React 官方網站
  2. Top-Level API
  3. Javascript：this用法整理

| 勘誤、提問或許願 |