首页 > react怎么改变state中object?

react怎么改变state中object?

constructor(props){
    super(props);
    this.state = {
        postdata : {},
        errormess : '' 
    }
    this.savedata = this.savedata.bind(this);
}

closeSlide(){
    this.props.callbackParent();
}

// 费用类型
handleType(e){
    let value = e.target.value;
    this.setState( Object.assign({},this.state.postdata,{ type: value }) )
    // this.setState({
    //     postdata : {
    //         type : value
    //     }
    // })
}

// 产生费用时间
handleDate(e){
    let value = e.target.value;
    this.setState( Object.assign({},this.state.postdata,{ date: value }) )
    // this.setState({
    //     postdata : {
    //         date : value
    //     }
    // })
}

// 费用金额
handleMoney(e){
    let value = e.target.value.trim();
    this.setState( Object.assign({},this.state.postdata,{ money: value }) )
    // this.setState({
    //     postdata : {
    //         money : value
    //     }
    // })
}

// 费用由来
handleDesc(e){
    let value = e.target.value.trim();
    this.setState( Object.assign({},this.state.postdata,{ desc: value }) )
    // this.setState({
    //     postdata : {
    //         desc : value
    //     }
    // })
}

savedata(){
    console.log(this.state.postdata);
}

最后保存提交的postdata并没有保存这四个字段

constructor(props){
    super(props);
    this.state = {
        postdata : {
            type : '',
            date : '',
            money : '',
            desc :'',
        },
        errormess : '' 
    }
    this.savedata = this.savedata.bind(this);
}

closeSlide(){
    this.props.callbackParent();
}

// 费用类型
handleType(e){
    let value = e.target.value;
    this.setState({
        postdata: Object.assign({},this.state.postdata,{type: value})
    })
}

// 产生费用时间
handleDate(e){
    let value = e.target.value;
    this.setState({
        postdata: Object.assign({},this.state.postdata,{date: value})
    })
}

// 费用金额
handleMoney(e){
    let value = e.target.value.trim();
    this.setState({
        postdata: Object.assign({},this.state.postdata,{money: value})
    })
}

// 费用由来
handleDesc(e){
    let value = e.target.value.trim();
    this.setState({
        postdata: Object.assign({},this.state.postdata,{desc: value})
    })
}

savedata(){
    console.log(this.state.postdata);
}

层级不对,你把四个属性放到了和postdata同一个层级了。而你那四个属性有没初始化,所以state不会显示出来,而postdata也是空的。

Object.assign({}, ...this.state.postdata, desc: value )

这样试试。刚开始研究,不太会,大概是这个意思。


setState(object nextState[, function callback])

合并 nextState 和当前 state。不是立即生效,而是在 render 执行后更新 state

初始 state

{
    postdata: {},
    errormess: ""
}

每次执行 setState 其实是 {type: xxx}, {value: xxx} ··· 这些对象与初始 state 合并。而不是合并到了 postdata 上。

this.setState({postdata: Object.assign(...)})

可以这样调用试试


https://facebook.github.io/react/docs/up...

【热门文章】
【热门文章】