1. 程式人生 > >react學習1:子向父通訊、修改state中array的object的屬性值

react學習1:子向父通訊、修改state中array的object的屬性值

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 })) } }) }