昨天有提到使用 Props 傳遞數值，元件(TextShow)可以用props從父元件(TextInput)取得傳給他的值，也就是這行：

<h1>{this.props.text}</h1>

接著來看看TextInput.js的部分：

import React, {Component} from 'react'
import TextShow from './TextShow'

  class TextInput extends Component {

    // 建構式
    // 若是需要定義 state，就需要在 constructor 使用 props
    constructor(props) {
        //super方法可以呼叫繼承父類別(React.Component)的屬性
        super(props);
        this.state = { text: '' };
      }

      //事件處理的方法，用e.target可以獲取到輸入框的值
      handleChange = (e) => {
        this.setState({text: e.target.value})
        }
      
      render() {
          return (
                <div>
                    <input type="text"
                    value={this.state.text}
                    placeholder="請輸入文字!"
                    onChange={this.handleChange}
                    />
                    <TextShow text={this.state.text}/>
                </div>
         )
      }
}

export default TextInput

狀態(State)

State 是 React 元件自己的內部狀態值，首先是使用建構式constructor ，用 this.state 去設定了這個元件的初始的狀態，裡面有個名為 text 的屬性，初始值是空字串。

handleChange 是一個事件處理的function，當輸入框裡的值發生改變時， e.target 獲取到輸入框的值，然後藉由 setState 去更動元件的 state 。

這邊要注意的是，在元件中的state不可以用 this.state.text = e.target.value 去直接更動其中所包含的值，不然React會出錯，因此 setState 是一個元件中非常重要的方法。

• 元件中唯一可以更動state的只有 setState 。

render()的部分，input標籤就是輸入框的部分，當輸入文字時也就是onChange事件發生，進入handleChange改變元件的state，text值也跟著輸入文字變化。

然後還需要顯示到TextShow元件中，所以用上面的的資料傳遞方式，把TextShow元件標記中的text屬性值定義為{this.state.text}，因為這裡是在 TextInput元件 內部，這邊的this.state 就是 TextInput元件 本身的狀態，這樣傳過去的值才會跟著狀態變動，假如我是這樣寫：

//錯誤的
<TextShow text={this.props.text}/>

由於props是從父元件來的，所以無法在這做出變動，TextShow那邊顯示自然也不會有變化。

這些關係存在於React元件定義中，父元件指的是某個位於上層的元件:

• A元件在render()中設定了B元件的屬性，A就是B的父元件。

• 元件是無法改變自己的props，這是它的父元件才可以做的事。