react學習1:子向父通訊、修改state中array的object的屬性值
阿新 • • 發佈:2019-01-07
1.子元件向父元件通訊:父元件根據需要寫好函式,傳給子元件回撥。
父元件中:寫好函式,並將函式重新命名後傳給子元件
toggleFinish(itemId) {
do some thing...
}
render() {
return <Son items={this.state.list} toggleFinish={this.someHandel} />
}
子元件中:通過this.props接收父元件傳來的函式,注意上下文繫結和函式中的引數
render() {
return (
this.props.items.map((v, i) => {
<ul>
<li onClick={this .props.toggleFinish.bind(this. v.id)}></li>
</ul>
})
)
}
2.獲取別的dom元素下的value或者屬性:不要試圖操作dom,這樣很不優雅。應該將別的元素的值或屬性通過this.setState()存在state下,然後再通過this.state獲取。
3.修改state中的array的object的某項屬性:先改掉第i項的屬性,再呼叫setState()才能更新改動
state = {
list: []
}
function xx() {
let list = this.state.list
list.map((v, i) => {
if (v.id === itemId) {
v.name = 'lord'
this.setState(preState => ({
list: list
}))
}
})
}