React 在父組件及子組件間傳遞資料 pass data between parent and children components

React Parent Component（父組件）與Child Component（子組件）間傳遞資料的方式如下。

下面範例在App中建立三個Component結構如下，父組件Block中有兩個子組件Input及Display。

App
└─ Block
    ├── Input
    └── Display

Input為<input/>文字輸入欄位組件，內容改變時會呼叫change事件的處理方法handleChange(event)將欄位值傳給props.toBlock為Block父組件的callback方法receiveValueFromInput()做為輸入參數。

Block.receiveValueFromInput()透過Input.toBlock收到欄位值參數後呼叫Block.setValue()把值設定到Block.state.inputValue，因Block狀態改變會重新呼叫Block.render()同時把更新的Block.state.inputValue（即欄位文字內容）作為Display的props.value（即<Display value={this.state.inputValue}/>）並取出為段落元素<p>的內容。

App.js

import { Component } from 'react'
import './App.css';

function App() {
  return <Block/>
}

class Block extends Component {

  constructor(props) {
    super(props)
    this.state = {inputValue: ''}

    this.receiveValueFromInput = this.receiveValueFromInput.bind(this)
  }

  receiveValueFromInput(valueFromInput) {
    this.setState({inputValue: valueFromInput})
  }

  render() {
    return (
      <div>
        <Input toBlock={this.receiveValueFromInput}/>
        <Display value={this.state.inputValue}/>
      </div>
    )
  }

}

class Input extends Component {

  constructor(props) {
    super(props)
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this)
  }

  render() {
    return <input value={this.state.value} onChange={this.handleChange}/>
  }

  handleChange(event) {
    this.setState({value: event.target.value})
    this.props.toBlock(event.target.value)
  }
}

class Display extends Component {

  constructor(props) {
    super(props)
    this.state = {value: ''}
  }

  render() {
    return <p>{this.props.value}</p>
  }
}

export default App;

參考github。

• React - 事件處理
• React - 提升 State
• React onclick 事件處理範例
• React Context傳遞參數