美文网首页
react中setState函数更新问题

react中setState函数更新问题

作者: 春木橙云 | 来源:发表于2018-02-07 11:40 被阅读928次
    class E extends Component{
        constructor(props, context) {
            super(props, context);
            this.state = {
                params: {
                    content: '',
                    title: '',    
                }
            }
        }
    
        //点击展示状态机中的参数对象
        clickHandle() {
            console.log(this.state.params)
        }
    
        getTitle(e){
            //思考为什么这里要将this.state赋值给state,单纯是想省掉写this的麻烦吗?
            const state = this.state
            state.params.title = e.target.value
            this.setState(state)
        }
    
        //为什么不用这种方式?
        getTitle(e){
            this.setState({
              params:{
                  title = e.target.value
               }
            })
        }
    
        render() {
            return (
              <div className="textBoxAll">
                <input className="inputBox" value={this.state.title} onChange={this.getTitle.bind(this)} type="text" placeholder="请输入标题"/>
                <button className="btn1" onClick={this.clickHandle.bind(this)}>发布</button>
              </div>
            );
        }
    }
    

    如上面的代码,要在状态机中保存一个参数对象,以便于以后API传参数,但是这里就会遇到一个问题:当使用第二种方式的时候,状态机中的content就会被清除,这该如何解决呢?

    为了防止这种情况的发生,就将this.state赋值给state常数,然后state对象去改变里面的值,最后通过setState()函数将状态机中的值全部被state对象替换。

    相关文章

      网友评论

          本文标题:react中setState函数更新问题

          本文链接:https://www.haomeiwen.com/subject/vkjiaxtx.html