在 React 的世界裡，父元件（parent components）透過 props 將資料傳遞給 子元件（children components），另外子元件也會在 state 存放一些狀態與資料。但某些情況的時候，我們需要能夠存取自己 render 的 DOM 元素或子元件，例如：
- 管理聚焦、文字選擇，媒體播放。
- 觸發動畫
- 整合第三方的 DOM 函式庫
參考教學 : https://www.youtube.com/watch?v=h5crrOsLbpk&index=15&list=PL478wQWRhpfaQbaET2DvDzG60EFGThtd1&t=0s
切記ref不能頻繁的使用
<div className="todoListMain">
<div className="header">
<form
<input ref={(a) => this._inputElement = a}
placeholder="enter task"></input>
<button type="submit">add</button>
<TodoItems entries={this.state.items}
delete={this.deleteItem} />
</form>
</div>
</div>
方法回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數。
在此範例中，為了避免在創立新的key值會衝突到重覆值，因此使用Date now的毫秒來判定key值。
if (this._inputElement.value !== "") {
var newItem = {
text : this._inputElement.value,
key : Date.now()
};
let newArray = this.state.items;
newArray.push(newItem);
this.setState({
items : newArray
}
)
}
遍歷每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。 當input輸入文字時觸發onChenge事件，event.target.value值存入this.state.search，再利用this.state.search使用filter()回圈過濾data內的資料。
deleteItem(key) {
let filteredItem = this.state.items.filter( (item) => {
return(item.key !== key)
}
)
// console.log(filteredItem)
this.setState({
items : filteredItem
})
}