[TOC] ## 概述 把共享組件放入父組件的 `props`中,子組件通過父組件以`props`傳入的函數傳值調用父組件 ## 案例 ``` class DemoInput1 extends Component{ constructor(props) { super(props); } handleChange(e){ /* 父組件傳入 onParentChange函數作為 props */ this.props.onParentChange(e.target.value) } render() { return ( <div> <input type="text" value={this.props.value} onChange={this.handleChange.bind(this)}/> </div> ) } } class DemoInput2 extends Component{ constructor(props) { super(props); } handleChange(e){ /* 父組件傳入 onParentChange函數作為 props */ this.props.onParentChange(e.target.value) } render() { return ( <div> <input type="text" value={this.props.value} onChange={this.handleChange.bind(this)}/> </div> ) } } class App extends Component{ constructor(props) { super(props); this.state={ value:"", } this.onParentChange= this.onParentChange.bind(this) } onParentChange(v){ this.setState({value:v}) } render() { let value = this.state.value; return( <div> //onParentChange 函數通過 props 傳入給組件 <DemoInput1 value={value} onParentChange={this.onParentChange}/> <DemoInput2 value={value} onParentChange={this.onParentChange}/> </div> ) } } ```