上篇介紹 prop 跟 state， 來做個關於 state 的練習

製做一個會顯示當下欄位輸入值的文字段落

回到 App.js，將原本的 ListItem component 都刪掉 (註解掉也可)

jsx 的註解

題外話，在 jsx 中註解的形式跟一般 js 略有不同
js 中的註解

// 單行註解
/* 多行註解 */

jsx 的註解

{/* 被註解掉了 */}

在 App.js 內添加 constructor(props){ super(props); }
再定義 this.state 的內容 inputContent

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputContent: ''
    }
  }
  render() {
    return (
      <>
        <h1>Make a input</h1>
        <input
          type="text"
          value={this.state.inputContent}
        />
        <p>{this.state.inputContent}</p>
      </>)
  }
}

建立 state 前的必要內容.. constructor 與 call super

要寫屬於 component 內的 state ，要先建立建構子(constructor) 及其中的 super
這跟 es6 的 class 繼承(inheritance)有關，因 react class component 基於 js class 的概念，
所以 call super 之前，所有 access this 都是不被允許的。

為何 call super 要傳入 props？

簡單來說，就是底層的 React.Component 初始化 this.props 時需要傳入 props
可以參考這裡

這階段還不會有效果，要對 input 添加事件(event) onChange
這裡簡短提一下 react 中的事件，下篇再做更詳細的說明

在 App component 上增加 changeInput function，在建構子中，將該 function 綁定(bind) 到自己這個 component 上

this.changeInput = this.changeInput.bind(this);

function 內執行的是傳入 evt (這個 onChange 事件)
並使用 react 內變更 state 的方法this.setState，將 inputContent 設定為 evt.target.value

最後在 render 中添加一個 顯示出 { this.state.inputContent } 的文字段落

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputContent: ''
    }
    this.changeInput = this.changeInput.bind(this);
  }
  changeInput(evt) {
    this.setState({ inputContent: evt.target.value })
  }
  render() {
  const {inputContent} = this.state; // 從 state 中 extract 出 inputContent
    return (
      <>
        <h1>Show the input current value</h1>
        <input onChange={this.changeInput} />
        <p>{inputContent}</p>
      </>)
  }
}

export default App;

成功獲得會同時顯示輸入內容的