通過create-react-app來創(chuàng)建項目仲闽，
目前只做了最簡單的添加和刪除操作，涉及知識點：組件之間傳值、事件綁定停撞。
項目目錄：
1551261485(1).jpg
頁面如下：
1551261564(1).jpg
大致分為三個組件：
App.js
topHeader.js
middleContent.js
在頭部的輸入框中輸入內(nèi)容，點擊確定悼瓮，在待完成事件中顯示輸入的內(nèi)容戈毒。
即：在頭部的組件中輸入，在內(nèi)容組件中顯示
在這里就涉及到組件之間的傳值問題横堡，即埋市，topHeader.js與middleContent.js兩個非父子關(guān)系的組件
方法一：
因為兩組件之間有相同的直接父組件，所以命贴，我們可以通過將數(shù)據(jù)從一個子組件傳遞給父組件道宅，然后再由父組件傳值給另一個子組件（當(dāng)然腊满，頁面邏輯非常復(fù)雜的情況下，這樣會很麻煩培己，但目前只會這一種）碳蛋。
添加
首先，在頭部的子組件中獲取到輸入框的值省咨，在點擊按鈕時調(diào)用父組件的方法進(jìn)行傳值肃弟。
topHeader.js
<button className="submitBtn" onClick={this.handleAdd.bind(this)}>確定</button>
handleAdd() {
if(this.props.onSubmit){
this.props.onSubmit(this.state.inputValue)
}
this.setState({
inputValue:''
})
}
父組件App.js
<TopHeader onSubmit={this.handleSubmit.bind(this)}/>
handleSubmit(value) {
var list = [...this.state.list, value];
this.setState({
list:list
})
}
然后，父組件再將 topHeader.js傳來的數(shù)據(jù)傳遞給middleContent.js零蓉，子組件通過props來接收數(shù)據(jù)
App.js
<MiddleContent content={this.state.list}/>
middleContent.js
<ul>
{
this.props.content.map((item, index) => {
return (
<li key={index} className="middle-li">
{item}
</li>
)
})
}
</ul>
通過遍歷數(shù)據(jù)將其顯示在頁面上
