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。
沒有留言:
張貼留言