~~~ constructor(props) { super(props) // 狀態（數據）提升 ，把數據放在最高層的組件中，直接下方給子組件 this.state = { list: [ { id: 'id-1', title: '標題1' }, { id: 'id-2', title: '標題2' }, { id: 'id-3', title: '標題3' } ], footerInfo: '底部文字' } } ~~~ 子組件 ~~~ class Input extends React.Component { constructor(props) { super(props); this.state = { title: '' } } render() { return <div> <input value={this.state.title} onChange={this.onTitleChange}/> <button onClick={this.onSubmit}>提交</button> </div> } onTitleChange = (e) => { this.setState({ title: e.target.value }) }; onSubmit = () => { const { submitTitle } = this.props submitTitle(this.state.title); // 'abc' this.setState({ title: '' }) } } ~~~ 父組件 ~~~ render() { return <div> <Input submitTitle={this.onSubmitTitle}/> <List list={this.state.list}/> <Footer text={this.state.footerInfo} length={this.state.list.length}/> </div> } onSubmitTitle = (title) => { this.setState({ list: this.state.list.concat({ id: `id-${Date.now()}`, title }) }) } ~~~